<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>黑不溜球de博客么么哒</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="不爱学习，卡吐露皮！">
<meta property="og:type" content="website">
<meta property="og:title" content="黑不溜球de博客么么哒">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="黑不溜球de博客么么哒">
<meta property="og:description" content="不爱学习，卡吐露皮！">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="Jone-xin">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/my_blog/atom.xml" title="黑不溜球de博客么么哒" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/my_blog/css/style.css">

<meta name="generator" content="Hexo 5.2.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/my_blog/" id="logo">黑不溜球de博客么么哒</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/my_blog/">主页</a>
        
          <a class="main-nav-link" href="/my_blog/archives">归档</a>
        
          <a class="main-nav-link" target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling">@我的gitee</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/my_blog/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-zhengze" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/18/zhengze/" class="article-date">
  <time datetime="2020-11-18T00:08:03.213Z" itemprop="datePublished">2020-11-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/18/zhengze/">JS中的正则表达式</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="正则表达式-的创建"><a href="#正则表达式-的创建" class="headerlink" title="正则表达式 的创建"></a>正则表达式 的创建</h4><p>参数: “正则表达式”,”匹配模式”(i和g)i表示忽略大小写  g表示全局匹配   </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var str1 &#x3D; &quot;bababadadaccccvbg&quot;</span><br><span class="line">var reg &#x3D; new RegExp(&quot;a&quot;,&quot;i&quot;);</span><br><span class="line">&#x2F;*用test()来检验正则表达式所约束的内容*&#x2F;</span><br><span class="line">console.log(reg.test(str1));</span><br><span class="line">&#x2F;*简单创建正则表达式*&#x2F;</span><br><span class="line">let reg &#x3D; &#x2F;ad&#x2F;i;</span><br><span class="line">console.log(reg.test(str1));</span><br></pre></td></tr></table></figure>

<h4 id="常用的匹配规则"><a href="#常用的匹配规则" class="headerlink" title="常用的匹配规则"></a>常用的匹配规则</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">[ab]等价于a|b,表示a或b的关系</span><br><span class="line">[a-z]任意小写字母</span><br><span class="line">[A-Z]任意大写字母</span><br><span class="line">[A-z]任意字母</span><br><span class="line">[0-9]任意数字</span><br><span class="line">[^]除了</span><br><span class="line">量词:</span><br><span class="line">a&#123;3&#125;等价于aaa  </span><br><span class="line">ab&#123;3&#125;等价于abbb </span><br><span class="line">(ab)&#123;3&#125;等价于 ababab</span><br><span class="line">b&#123;1,3&#125; b出现1-3次 等价于  b|bb|bbb</span><br><span class="line">+  相当于&#123;1,&#125;  至少一个</span><br><span class="line">*  相当于&#123;0,&#125;  至少0个</span><br><span class="line">?  相当于&#123;0,1&#125; 0个或者1个</span><br><span class="line">^  表示开头:  ^a 以a开头</span><br><span class="line">$  表示结尾:  b$ 以b结尾</span><br><span class="line">^和$同时使用  表示^$之间必须完全满足</span><br><span class="line">\w</span><br><span class="line">任意字母,数字,下划线</span><br><span class="line">\W  </span><br><span class="line">除了任意字母,数字.下划线</span><br><span class="line"></span><br><span class="line">\d</span><br><span class="line">任意数字</span><br><span class="line">\D</span><br><span class="line"></span><br><span class="line">\s</span><br><span class="line">空格</span><br><span class="line">\S</span><br><span class="line"></span><br><span class="line">\b</span><br><span class="line">单词边界</span><br><span class="line">\B</span><br></pre></td></tr></table></figure>

<h4 id="简单的检验案例（手机号，电子邮箱）"><a href="#简单的检验案例（手机号，电子邮箱）" class="headerlink" title="简单的检验案例（手机号，电子邮箱）"></a>简单的检验案例（手机号，电子邮箱）</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;手机号</span><br><span class="line">let reg&#x3D;&#x2F;^1[3-9][0-9]&#123;9&#125;&#x2F;;</span><br><span class="line">str6&#x3D;&quot;192887678766&quot;</span><br><span class="line">console.log(reg.test(str6));</span><br><span class="line">&#x2F;&#x2F;邮箱</span><br><span class="line">电子邮件格式：</span><br><span class="line">\w&#123;3,&#125;  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]&#123;2-5&#125;)&#123;1,2&#125;</span><br><span class="line">var str8&#x3D;&quot;www.qq@adf.com&quot;;</span><br><span class="line">reg&#x3D;&#x2F;^\w&#123;3,&#125;(\.\w+)*@[A-z0-9]+(\.[A-z]&#123;25&#125;)&#123;1,2&#125;$&#x2F;;</span><br><span class="line">console.log(reg.test(str8));    </span><br></pre></td></tr></table></figure>

<h4 id="正则表达式中的五个匹配函数（两个正则的，三个字付串的）"><a href="#正则表达式中的五个匹配函数（两个正则的，三个字付串的）" class="headerlink" title="正则表达式中的五个匹配函数（两个正则的，三个字付串的）"></a>正则表达式中的五个匹配函数（两个正则的，三个字付串的）</h4><p>1，<code>reg.test(str)</code> —– 多从全局匹配调用，下一次将会再上一次结束索引值位置（lastindex）进行往后匹配</p>
<p>—返回  true /false</p>
<p>2，<code>reg.exec(str)</code> —– 多从全局匹配调用，下一次将会再上一次结束索引值位置（lastindex）进行往后匹配`</p>
<p>—返回   匹配项所组成的数组</p>
<p>3，**<code>str.match(reg)</code>**</p>
<p>–返回    匹配字符串所组成的数组(默认返回匹配第一个组成数组，g开启后返回所有符合条件的组成的数组)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let str &#x3D; &#39;sada s  d&#39; </span><br><span class="line">let a &#x3D; str.match(&#x2F;\s&#x2F;g) </span><br><span class="line">console.log(a) &#x2F;&#x2F; 【&#39;&#39;,&#39;&#39;,&#39;&#39;,&#39;&#39;】</span><br></pre></td></tr></table></figure>



<p>4，**<code>str.replace(reg)</code>**</p>
<p>–返回   被指定字符串替换后的新字符串;(默认只替换第一个，g开启后，都替换)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">let str &#x3D; &#39;sada s  d&#39; </span><br><span class="line">let a &#x3D; str.replace(&#x2F;\s&#x2F;g,&#39;---&#39;) </span><br><span class="line">console.log(a)</span><br></pre></td></tr></table></figure>



<p>5,<code>str.search(reg)</code>:</p>
<p>返回值：第一次匹配的下标（索引），(g开启也只匹配第一个)</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">et str &#x3D; &#39;sada s  d&#39;    </span><br><span class="line">let a &#x3D; str.search(&#x2F;\s&#x2F;)    </span><br><span class="line">console.log(a)</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/18/zhengze/" data-id="ckhmnwyu100066rx4g59mbbpu" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-react" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/react/" class="article-date">
  <time datetime="2020-11-03T07:29:20.602Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/03/react/">React基础知识笔记</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="react笔记"><a href="#react笔记" class="headerlink" title="react笔记"></a>react笔记</h3><h4 id="1-react导读"><a href="#1-react导读" class="headerlink" title="1.react导读"></a>1.react导读</h4><h5 id="1-1react脚手架"><a href="#1-1react脚手架" class="headerlink" title="1.1react脚手架"></a>1.1react脚手架</h5><p>​    1.全局安装脚手架:<code>npm install -g create-react-app</code></p>
<p>​    2.<code>create react app 项目名称</code></p>
<p>​    3.<code>npm start</code></p>
<h5 id="1-2一个简单的hello-world"><a href="#1-2一个简单的hello-world" class="headerlink" title="1.2一个简单的hello world"></a>1.2一个简单的hello world</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">   <span class="keyword">let</span> a = <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hellow world<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br><span class="line">   	ReactDOM.render(a,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>))</span><br><span class="line">   <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line"> &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="1-3JSX语法"><a href="#1-3JSX语法" class="headerlink" title="1.3JSX语法"></a>1.3JSX语法</h5><p>​    1.3.1.Jsx是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。</p>
<p>​    1.3.2.JSX 语法中，你可以在大括号内放置任何有效的 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">JavaScript 表达式</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">let</span> name = <span class="string">&#x27;xin&#x27;</span>; </span><br><span class="line">    <span class="keyword">let</span> a = <span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Hellow world&#123;name&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>;</span><br><span class="line">    ReactDOM.render(a,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>));</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>1.3.3.也可以使用大括号，来在【属性】值中插入一个 JavaScript 表达式：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">const element &#x3D; &lt;img src&#x3D;&#123;user.avatarUrl&#125;&gt;&lt;&#x2F;img&gt;;</span><br></pre></td></tr></table></figure>

<p>1.3.4.JSX 标签里能够包含很多子元素:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">const element &#x3D; (</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;h1&gt;Hello!&lt;&#x2F;h1&gt;</span><br><span class="line">    &lt;h2&gt;Good to see you here.&lt;&#x2F;h2&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>1.3.5.<strong>JSX</strong>的转化</p>
<p>以下两种示例代码完全等效：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">const element &#x3D; (</span><br><span class="line">  &lt;h1 className&#x3D;&quot;greeting&quot;&gt;</span><br><span class="line">    Hello, world!</span><br><span class="line">  &lt;&#x2F;h1&gt;</span><br><span class="line">);</span><br><span class="line">----------------------------</span><br><span class="line">const element &#x3D; React.createElement(</span><br><span class="line">  &#39;h1&#39;,</span><br><span class="line">  &#123;className: &#39;greeting&#39;&#125;,</span><br><span class="line">  &#39;Hello, world!&#39;</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p><code>React.createElement()</code> 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 注意：这是简化过的结构</span><br><span class="line">const element &#x3D; &#123;</span><br><span class="line">  type: &#39;h1&#39;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    className: &#39;greeting&#39;,</span><br><span class="line">    children: &#39;Hello, world!&#39;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。</p>
<p>1.3.6**.react只会跟新变化的元素（tree diff）**</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">   <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="keyword">let</span> element = (</span><br><span class="line">       &lt;div&gt;</span><br><span class="line">        &lt;p&gt;react只会跟新变化的dom元素以达到最大优化！&lt;/p&gt;</span><br><span class="line">        &lt;p&gt;&#123;<span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleTimeString()&#125;&lt;/p&gt; </span><br><span class="line">       &lt;/div&gt;</span><br><span class="line">     )</span><br><span class="line">     ReactDOM.render(element,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>))</span><br><span class="line">   &#125;</span><br><span class="line">   <span class="built_in">setInterval</span>(fn,<span class="number">1000</span>);</span><br><span class="line">  &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<hr>
<h4 id="2-react组件"><a href="#2-react组件" class="headerlink" title="2.react组件"></a>2.react组件</h4><h5 id="2-1函数组件"><a href="#2-1函数组件" class="headerlink" title="2.1函数组件"></a>2.1函数组件</h5><p>2.1.1.<strong>props属性：</strong>它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">  <span class="comment">//工厂组件</span></span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">Home</span> (<span class="params">props</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span>(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;组件上穿过开的值是：&#123;props.name&#125;&lt;/p&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> element = <span class="xml"><span class="tag">&lt;<span class="name">Home</span> <span class="attr">name</span>=<span class="string">&quot;鑫哥哥&quot;</span> /&gt;</span></span></span><br><span class="line">  ReactDOM.render(element,<span class="built_in">document</span>.getElementById(<span class="string">&#x27;box&#x27;</span>))</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>2.1.2.<strong>组件名称必须以大写字母开头</strong>。</p>
<p>React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<code>&lt;div /&gt;</code> 代表 HTML 的 div 标签，而 <code>&lt;Welcome /&gt;</code> 则代表一个组件，并且需在作用域内使用 <code>Welcome</code></p>
<h5 id="2-2class组件"><a href="#2-2class组件" class="headerlink" title="2.2class组件"></a>2.2class组件</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">  &#x2F;&#x2F;类组件</span><br><span class="line">  class Home extends React.Component&#123;</span><br><span class="line">    &#x2F;&#x2F;构造函数，处理组件上传递过来的值</span><br><span class="line">    constructor(props)&#123;</span><br><span class="line">      super(props)</span><br><span class="line">    &#125;</span><br><span class="line">    render()&#123;</span><br><span class="line">      return(</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;p&gt;这是组件上穿过来的信息：&#123;this.props.name&#125;&lt;&#x2F;p&gt; </span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  let element &#x3D; &lt;Home name&#x3D;&quot;鑫哥哥&quot; &#x2F;&gt;</span><br><span class="line">  ReactDOM.render(element,document.getElementById(&#39;box&#39;))</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="2-3-组件的生命周期和state"><a href="#2-3-组件的生命周期和state" class="headerlink" title="2.3.组件的生命周期和state"></a>2.3.组件的生命周期和state</h5><p>2.3.1.利用类组件重新写一遍时钟跟新</p>
<p>​         <strong>修改state中的值，必须通过<code>setState()</code>来更新</strong></p>
<p>​         <strong><code>props</code>和<code>state</code>的更新是异步的</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">      &#x2F;&#x2F;类组件</span><br><span class="line">     class Clock extends React.Component&#123;</span><br><span class="line">       constructor(props)&#123;</span><br><span class="line">          super(props)</span><br><span class="line">          this.state &#x3D; &#123;date:new Date()&#125;</span><br><span class="line">       &#125;</span><br><span class="line">       &#x2F;&#x2F;将被挂在的时候开启定时器</span><br><span class="line">       componentDidMount()&#123;</span><br><span class="line">         &#x2F;&#x2F;设置定时器，改变state的值</span><br><span class="line">         let timer &#x3D; setInterval(()&#x3D;&gt;&#123;</span><br><span class="line">           this.setState(&#123;</span><br><span class="line">             date:new Date()</span><br><span class="line">           &#125;)</span><br><span class="line">         &#125;,1000)</span><br><span class="line">       &#125;</span><br><span class="line">       &#x2F;&#x2F;组件将要销毁时清除定时器</span><br><span class="line">       componentWiiUnmount()&#123;</span><br><span class="line">        &#x2F;&#x2F;移除定时器</span><br><span class="line">        clearInterval(timer)</span><br><span class="line">       &#125;</span><br><span class="line">       render()&#123;</span><br><span class="line">         return(</span><br><span class="line">           &lt;div&gt;</span><br><span class="line">            &lt;p&gt;这是组件上穿过来的信息：&#123;this.state.date.toLocaleTimeString()&#125;&lt;&#x2F;p&gt; </span><br><span class="line">           &lt;&#x2F;div&gt;</span><br><span class="line">         )</span><br><span class="line">       &#125;</span><br><span class="line">     &#125;</span><br><span class="line">    ReactDOM.render(&lt;Clock &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p><strong>react生命周期</strong></p>
<h4 id="3-事件处理"><a href="#3-事件处理" class="headerlink" title="3.事件处理"></a>3.事件处理</h4><h5 id="3-1-react中的事件"><a href="#3-1-react中的事件" class="headerlink" title="3.1 react中的事件"></a>3.1 react中的事件</h5><ul>
<li>React 事件的命名采用小驼峰式（camelCase），而不是纯小写。</li>
<li>使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button onClick&#x3D;&#123;activateLasers&#125;&gt;</span><br><span class="line">  Activate Lasers</span><br><span class="line">&lt;&#x2F;button&gt;</span><br></pre></td></tr></table></figure>

<ul>
<li>React 中阻止默认事件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ActionLink</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">handleClick</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="comment">//e时合成事件，兼容所有浏览器</span></span><br><span class="line">    e.preventDefault();    </span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;The link was clicked.&#x27;</span>);  </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;a href=<span class="string">&quot;#&quot;</span> onClick=&#123;handleClick&#125;&gt;      </span><br><span class="line">    	Click me</span><br><span class="line">    &lt;/a&gt;</span><br><span class="line">  );  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这里的<code>e</code> 是一个合成事件。React 根据 <a target="_blank" rel="noopener" href="https://www.w3.org/TR/DOM-Level-3-Events/">W3C 规范</a>来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题</p>
<ul>
<li><p>切换显实例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">    class Toggle extends React.Component&#123;</span><br><span class="line">      constructor(props) &#123;</span><br><span class="line">        super(props)</span><br><span class="line">        this.state &#x3D; &#123;isToggle:true&#125;</span><br><span class="line">      &#125;</span><br><span class="line">      handClick()&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">          isToggle:!this.state.isToggle</span><br><span class="line">        &#125;)</span><br><span class="line">        &#x2F;&#x2F;或者</span><br><span class="line">        &#x2F;&#x2F; this.setState(state &#x3D;&gt; &#123;</span><br><span class="line">        &#x2F;&#x2F;   return(&#123;</span><br><span class="line">        &#x2F;&#x2F;     isToggle:!state.isToggle</span><br><span class="line">        &#x2F;&#x2F;   &#125;)</span><br><span class="line">        &#x2F;&#x2F; &#125;)</span><br><span class="line">        </span><br><span class="line">      &#125;</span><br><span class="line">      render()&#123;</span><br><span class="line">        return(</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &lt;p&gt;切换开关&lt;&#x2F;p&gt;</span><br><span class="line">            &lt;p&gt;现在的状态是&#123;this.state.isToggle?&#39;ON&#39;:&#39;OFF&#39;&#125;&lt;&#x2F;p&gt;</span><br><span class="line">            &lt;button onClick&#x3D;&#123;this.handClick.bind(this)&#125;&gt;切换开关&lt;&#x2F;button&gt;</span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ReactDOM.render(&lt;Toggle &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">    </span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>实验性的绑定this语法(箭头函数)</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">class LoggingButton extends React.Component &#123;</span><br><span class="line">  &#x2F;&#x2F; 此语法确保 &#96;handleClick&#96; 内的 &#96;this&#96; 已被绑定。</span><br><span class="line">  &#x2F;&#x2F; 注意: 这是 *实验性* 语法。</span><br><span class="line">  handleClick &#x3D; () &#x3D;&gt; &#123;</span><br><span class="line">    console.log(&#39;this is:&#39;, this);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;button onClick&#x3D;&#123;this.handleClick&#125;&gt;</span><br><span class="line">        Click me</span><br><span class="line">      &lt;&#x2F;button&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="4-条件渲染"><a href="#4-条件渲染" class="headerlink" title="4.条件渲染"></a>4.条件渲染</h4><h5 id="4-1-if条件渲染组件"><a href="#4-1-if条件渲染组件" class="headerlink" title="4.1.if条件渲染组件"></a>4.1.if条件渲染组件</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">   function A () &#123;</span><br><span class="line">     return &lt;p&gt;我是组件A&lt;&#x2F;p&gt;</span><br><span class="line">   &#125;</span><br><span class="line">   function B () &#123;</span><br><span class="line">     return &lt;p&gt;我是组件B&lt;&#x2F;p&gt;</span><br><span class="line">   &#125;</span><br><span class="line">   class Toggle extends React.Component&#123;</span><br><span class="line">     constructor(props)&#123;</span><br><span class="line">       super(props)</span><br><span class="line">       this.state &#x3D; &#123;iss:false&#125;</span><br><span class="line">     &#125;</span><br><span class="line">     render() &#123;</span><br><span class="line">       if(this.state.iss)&#123;</span><br><span class="line">         return &lt;A &#x2F;&gt;</span><br><span class="line">       &#125;else&#123;</span><br><span class="line">         return&lt;B &#x2F;&gt; </span><br><span class="line">       &#125;</span><br><span class="line">     &#125;</span><br><span class="line">   &#125;</span><br><span class="line">   ReactDOM.render(&lt;Toggle &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">   </span><br><span class="line"> &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="4-2-amp-amp-实现条件渲染"><a href="#4-2-amp-amp-实现条件渲染" class="headerlink" title="4.2.&amp;&amp;实现条件渲染"></a>4.2.&amp;&amp;实现条件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">function Mailbox(props) &#123;</span><br><span class="line">  const unreadMessages &#x3D; props.unreadMessages;</span><br><span class="line">  return (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;h1&gt;Hello!&lt;&#x2F;h1&gt;</span><br><span class="line">      &#123;unreadMessages.length &gt; 0 &amp;&amp;</span><br><span class="line">        &lt;h2&gt;</span><br><span class="line">          You have &#123;unreadMessages.length&#125; unread messages.</span><br><span class="line">        &lt;&#x2F;h2&gt;</span><br><span class="line">      &#125;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const messages &#x3D; [&#39;React&#39;, &#39;Re: React&#39;, &#39;Re:Re: React&#39;];</span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;Mailbox unreadMessages&#x3D;&#123;messages&#125; &#x2F;&gt;,</span><br><span class="line">  document.getElementById(&#39;root&#39;)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h5 id="4-3-三目运算符实现条件渲染"><a href="#4-3-三目运算符实现条件渲染" class="headerlink" title="4.3.三目运算符实现条件渲染"></a>4.3.三目运算符实现条件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">render() &#123;</span><br><span class="line">  const isLoggedIn &#x3D; this.state.isLoggedIn;</span><br><span class="line">  return (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &#123;isLoggedIn        ? &lt;LogoutButton onClick&#x3D;&#123;this.handleLogoutClick&#125; &#x2F;&gt;</span><br><span class="line">        : &lt;LoginButton onClick&#x3D;&#123;this.handleLoginClick&#125; &#x2F;&gt;      &#125;</span><br><span class="line">    &lt;&#x2F;div&gt;  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="4-4-阻止组件渲染"><a href="#4-4-阻止组件渲染" class="headerlink" title="4.4.阻止组件渲染"></a>4.4.阻止组件渲染</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function WarningBanner(props) &#123;</span><br><span class="line">  if (!props.warn) </span><br><span class="line">  &#123;    </span><br><span class="line">    return null;  </span><br><span class="line">  &#125;</span><br><span class="line">  return (</span><br><span class="line">    &lt;div className&#x3D;&quot;warning&quot;&gt;</span><br><span class="line">      Warning!</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="5-列表-amp-key"><a href="#5-列表-amp-key" class="headerlink" title="5.列表&amp;key"></a>5.列表&amp;key</h4><h5 id="5-1-数组的展示"><a href="#5-1-数组的展示" class="headerlink" title="5.1.数组的展示"></a>5.1.数组的展示</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">  function Home(props)&#123;</span><br><span class="line">    return(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &#123;props.messege.map((value,index) &#x3D;&gt; &#123;</span><br><span class="line">          return &lt;p key&#x3D;&#123;index&#125;&gt;&#123;value&#125;&lt;&#x2F;p&gt;</span><br><span class="line">        &#125;)&#125;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">  let lover &#x3D; [&#39;打球&#39;,&#39;羽毛球&#39;,&#39;足球&#39;,&#39;乒乓球&#39;,&#39;台球&#39;]</span><br><span class="line">  ReactDOM.render(&lt;Home messege&#x3D;&#123;lover&#125;&#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="6-表单"><a href="#6-表单" class="headerlink" title="6.表单"></a>6.表单</h4><h5 id="6-1受控组件"><a href="#6-1受控组件" class="headerlink" title="6.1受控组件"></a>6.1受控组件</h5><p>6.1.1.受控组件的概念：渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。</p>
<p>6.1.2.实例一：实时监控表单输入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">    class Home extends React.Component&#123;</span><br><span class="line">      constructor(props)&#123;</span><br><span class="line">        super(props);</span><br><span class="line">        this.state &#x3D; &#123;value:&#39;&#39;&#125;</span><br><span class="line">      &#125;</span><br><span class="line">      handInput(e)&#123;</span><br><span class="line">        this.setState(&#123;</span><br><span class="line">          value:e.target.value</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">      handSubmit(e)&#123;</span><br><span class="line">        alert(this.state.value)</span><br><span class="line">      &#125;</span><br><span class="line">      render()&#123;</span><br><span class="line">        return(</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; onChange&#x3D;&#123;this.handInput.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">            &#x2F;&#x2F;p标签实时显示表单的输入内容</span><br><span class="line">            &lt;p&gt;&#123;this.state.value&#125;&lt;&#x2F;p&gt;</span><br><span class="line">            &#x2F;&#x2F;提交的时候显示最终表单的内容</span><br><span class="line">            &lt;button onClick&#x3D;&#123;this.handSubmit.bind(this)&#125; &gt;提交&lt;&#x2F;button&gt;</span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ReactDOM.render(&lt;Home &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="7-状态提升"><a href="#7-状态提升" class="headerlink" title="7.状态提升"></a>7.状态提升</h4><h5 id="7-1-将多个组件中需要共享的-state-向上移动到它们的最近共同父组件中，便可实现共享-state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）"><a href="#7-1-将多个组件中需要共享的-state-向上移动到它们的最近共同父组件中，便可实现共享-state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）" class="headerlink" title="7.1.将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）"></a>7.1.将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”（父组件定义state，子组件通过props共享父组件的数据）</h5><p>7.1.1.摄氏度与华氏度转换案例：</p>
<ul>
<li>父组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">class Home extends React.Component&#123;</span><br><span class="line">  constructor(props)&#123;</span><br><span class="line">    super(props)</span><br><span class="line">    this.state &#x3D; &#123;sheshidu:32,huashidu:0&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;华氏度转化</span><br><span class="line">  huashi(data)&#123;</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      sheshidu:data*(9&#x2F;5)+32</span><br><span class="line">    &#125;)</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      huashidu:data</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;摄氏度转化</span><br><span class="line">  sheshi(data)&#123;</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      sheshidu:data</span><br><span class="line">    &#125;)</span><br><span class="line">    this.setState(&#123;</span><br><span class="line">      huashidu:(5&#x2F;9)*(data-32)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;Sheshi temp&#x3D;&#123;this.state.sheshidu&#125; sheshi&#x3D;&#123;this.sheshi.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">        &lt;Huashi temp&#x3D;&#123;this.state.huashidu&#125; huashi&#x3D;&#123;this.huashi.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>sheshi组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;摄氏度</span><br><span class="line">class Sheshi extends React.Component&#123;</span><br><span class="line">  constructor(props)&#123;</span><br><span class="line">    super(props)</span><br><span class="line">    this.state &#x3D; &#123;value:0&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;自组件向父组件传数据通过父组件定义的函数，子组件回调</span><br><span class="line">  handChange(e)&#123;</span><br><span class="line">    this.props.sheshi(e.target.value)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;摄氏度&lt;&#x2F;p&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; value&#x3D;&#123;this.props.temp&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<ul>
<li>huashi组件</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;华氏度</span><br><span class="line">class Huashi extends React.Component&#123;</span><br><span class="line">  constructor(props)&#123;</span><br><span class="line">    super(props)</span><br><span class="line">    this.state &#x3D; &#123;value:0&#125;</span><br><span class="line">  &#125;</span><br><span class="line">  &#x2F;&#x2F;自组件向父组件传数据通过父组件定义的函数，子组件回调</span><br><span class="line">  handChange(e)&#123;</span><br><span class="line">    this.props.huashi(e.target.value)</span><br><span class="line">  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;p&gt;华氏度&lt;&#x2F;p&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;text&quot; value&#x3D;&#123;this.props.temp&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125;&#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="8-组合VS继承"><a href="#8-组合VS继承" class="headerlink" title="8.组合VS继承"></a>8.组合VS继承</h4><h5 id="8-1-组件可以接受任意-props，包括基本数据类型，React-元素以及函数。"><a href="#8-1-组件可以接受任意-props，包括基本数据类型，React-元素以及函数。" class="headerlink" title="8.1 组件可以接受任意 props，包括基本数据类型，React 元素以及函数。"></a>8.1 组件可以接受任意 props，包括基本数据类型，React 元素以及函数。</h5><p>8.1.1.以一个类似插槽的例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;babel&quot;&gt;</span><br><span class="line">  class Son extends React.Component&#123;</span><br><span class="line">    constructor(props)&#123;</span><br><span class="line">      super(props)</span><br><span class="line">    &#125;</span><br><span class="line">    render() &#123;</span><br><span class="line">      return (</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">         &lt;p&gt;左边&lt;&#x2F;p&gt;</span><br><span class="line">         &#123;props.left&#125; &#123;&#x2F;*类似插槽占位置*&#x2F;&#125;</span><br><span class="line">         &lt;p&gt;左边&lt;&#x2F;p&gt;</span><br><span class="line">         &#123;props.right&#125; &#123;&#x2F;*类似插槽占位置*&#x2F;&#125;  </span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  class Home extends React.Component&#123;</span><br><span class="line">    render() &#123;</span><br><span class="line">      return (</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">          &lt;Son left&#x3D;&#123;&lt;A &#x2F;&gt;&#125; right&#x3D;&#123;&lt;B &#x2F;&gt;&#125; &#x2F;&gt;</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">      )</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  function A()&#123;</span><br><span class="line">    return(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">         &lt;p&gt;组件A&lt;&#x2F;p&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">  function B()&#123;</span><br><span class="line">    return(</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">         &lt;p&gt;组件B&lt;&#x2F;p&gt;</span><br><span class="line">      &lt;&#x2F;div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">   ReactDOM.render(&lt;Home &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line"> &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="9-无障碍"><a href="#9-无障碍" class="headerlink" title="9.无障碍"></a>9.无障碍</h4><h5 id="9-1正确的语意话"><a href="#9-1正确的语意话" class="headerlink" title="9.1正确的语意话"></a>9.1正确的语意话</h5><p>9.1.1.比如当在 JSX 中使用 <code>&lt;div&gt;</code> 元素来实现 React 代码功能的时候，又或是在使用列表（<code>&lt;ol&gt;</code>， <code>&lt;ul&gt;</code> 和 <code>&lt;dl&gt;</code>）和 HTML <code>&lt;table&gt;</code> 时。 在这种情况下，我们应该使用 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/fragments.html">React Fragments</a> 来组合各个组件。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">import React, &#123; Fragment &#125; from &#39;react&#39;;</span><br><span class="line">function ListItem(&#123; item &#125;) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;Fragment&gt;      </span><br><span class="line">      &lt;dt&gt;&#123;item.term&#125;&lt;&#x2F;dt&gt;</span><br><span class="line">      &lt;dd&gt;&#123;item.description&#125;&lt;&#x2F;dd&gt;</span><br><span class="line">    &lt;&#x2F;Fragment&gt;  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function Glossary(props) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;dl&gt;</span><br><span class="line">      &#123;props.items.map(item &#x3D;&gt; (</span><br><span class="line">        &lt;ListItem item&#x3D;&#123;item&#125; key&#x3D;&#123;item.id&#125; &#x2F;&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">    &lt;&#x2F;dl&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>9.1.2.当你不需要在 fragment 标签中添加任何 prop 且你的工具支持的时候，你可以使用 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/fragments.html#short-syntax">短语法</a>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">function ListItem(&#123; item &#125;) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;&gt;      </span><br><span class="line">    	&lt;dt&gt;&#123;item.term&#125;&lt;&#x2F;dt&gt;</span><br><span class="line">      &lt;dd&gt;&#123;item.description&#125;&lt;&#x2F;dd&gt;</span><br><span class="line">    &lt;&#x2F;&gt;  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>9.1.3请注意 <code>for</code> 在 JSX 中应该被写作 <code>htmlFor</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;label htmlFor&#x3D;&quot;namedInput&quot;&gt;Name:&lt;&#x2F;label&gt;</span><br><span class="line">&lt;input id&#x3D;&quot;namedInput&quot; type&#x3D;&quot;text&quot; name&#x3D;&quot;name&quot;&#x2F;&gt;</span><br></pre></td></tr></table></figure>

<h5 id="9-2三种引用对象的方式（ref）"><a href="#9-2三种引用对象的方式（ref）" class="headerlink" title="9.2三种引用对象的方式（ref）"></a>9.2三种引用对象的方式（ref）</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">class Home extends React.Component&#123;</span><br><span class="line">      constructor(props)&#123;</span><br><span class="line">        super(props)</span><br><span class="line">        this.textInput &#x3D; React.createRef()</span><br><span class="line">      &#125;</span><br><span class="line">      handChange(e)&#123;</span><br><span class="line">        &#x2F;&#x2F;1,拿到元素对应的value</span><br><span class="line">        console.log(this.textInput.current.value)</span><br><span class="line">        console.log(this.refs.a.value)</span><br><span class="line">        console.log(this.content.value)</span><br><span class="line">      &#125;</span><br><span class="line">      render() &#123;</span><br><span class="line">        return (</span><br><span class="line">          &lt;div&gt;</span><br><span class="line">            &#x2F;&#x2F;创建一个ref指引</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; ref&#x3D;&#123;this.textInput&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125; &#x2F;&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; ref&#x3D;&quot;a&quot; onChange&#x3D;&#123;this.handChange.bind(this)&#125; &#x2F;&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; ref&#x3D;&#123;input&#x3D;&gt;this.content &#x3D; input&#125; onChange&#x3D;&#123;this.handChange.bind(this)&#125; &#x2F;&gt;</span><br><span class="line">          </span><br><span class="line">          &lt;&#x2F;div&gt;</span><br><span class="line">        )</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    ReactDOM.render(&lt;Home &#x2F;&gt;,document.getElementById(&#39;box&#39;))</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="9-3-context的使用"><a href="#9-3-context的使用" class="headerlink" title="9.3 context的使用"></a>9.3 context的使用</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。&#x2F;&#x2F; 为当前的 theme 创建一个 context（“light”为默认值）。const ThemeContext &#x3D; React.createContext(&#39;light&#39;);class App extends React.Component &#123;</span><br><span class="line">  render() &#123;</span><br><span class="line">    &#x2F;&#x2F; 使用一个 Provider 来将当前的 theme 传递给以下的组件树。    &#x2F;&#x2F; 无论多深，任何组件都能读取这个值。    &#x2F;&#x2F; 在这个例子中，我们将 “dark” 作为当前的值传递下去。    return (</span><br><span class="line">      &lt;ThemeContext.Provider value&#x3D;&quot;dark&quot;&gt;        &lt;Toolbar &#x2F;&gt;</span><br><span class="line">      &lt;&#x2F;ThemeContext.Provider&gt;</span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 中间的组件再也不必指明往下传递 theme 了。function Toolbar() &#123;  return (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;ThemedButton &#x2F;&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">class ThemedButton extends React.Component &#123;</span><br><span class="line">  &#x2F;&#x2F; 指定 contextType 读取当前的 theme context。  &#x2F;&#x2F; React 会往上找到最近的 theme Provider，然后使用它的值。  &#x2F;&#x2F; 在这个例子中，当前的 theme 值为 “dark”。  static contextType &#x3D; ThemeContext;</span><br><span class="line">  render() &#123;</span><br><span class="line">    return &lt;Button theme&#x3D;&#123;this.context&#125; &#x2F;&gt;;  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h4 id="10-错误边界"><a href="#10-错误边界" class="headerlink" title="10 错误边界"></a>10 错误边界</h4><h5 id="10-1-错误边界是一种-React-组件，这种组件可以捕获并打印发生在其子组件树任何位置的-JavaScript-错误，并且，它会渲染出备用-UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。"><a href="#10-1-错误边界是一种-React-组件，这种组件可以捕获并打印发生在其子组件树任何位置的-JavaScript-错误，并且，它会渲染出备用-UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。" class="headerlink" title="10.1 错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。"></a>10.1 错误边界是一种 React 组件，这种组件<strong>可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI</strong>，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。</h5><h5 id="10-2如果一个-class-组件中定义了-static-getDerivedStateFromError-或-componentDidCatch-这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用-static-getDerivedStateFromError-渲染备用-UI-，使用-componentDidCatch-打印错误信息。"><a href="#10-2如果一个-class-组件中定义了-static-getDerivedStateFromError-或-componentDidCatch-这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用-static-getDerivedStateFromError-渲染备用-UI-，使用-componentDidCatch-打印错误信息。" class="headerlink" title="10.2如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。"></a>10.2如果一个 class 组件中定义了 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromerror"><code>static getDerivedStateFromError()</code></a> 或 <a target="_blank" rel="noopener" href="https://zh-hans.reactjs.org/docs/react-component.html#componentdidcatch"><code>componentDidCatch()</code></a> 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 <code>static getDerivedStateFromError()</code> 渲染备用 UI ，使用 <code>componentDidCatch()</code> 打印错误信息。</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">class ErrorBoundary extends React.Component &#123;</span><br><span class="line">  constructor(props) &#123;</span><br><span class="line">    super(props);</span><br><span class="line">    this.state &#x3D; &#123; hasError: false &#125;;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  static getDerivedStateFromError(error) &#123;    &#x2F;&#x2F; 更新 state 使下一次渲染能够显示降级后的 UI    return &#123; hasError: true &#125;;  &#125;</span><br><span class="line">  componentDidCatch(error, errorInfo) &#123;    &#x2F;&#x2F; 你同样可以将错误日志上报给服务器    logErrorToMyService(error, errorInfo);  &#125;</span><br><span class="line">  render() &#123;</span><br><span class="line">    if (this.state.hasError) &#123;      &#x2F;&#x2F; 你可以自定义降级后的 UI 并渲染      return &lt;h1&gt;Something went wrong.&lt;&#x2F;h1&gt;;    &#125;</span><br><span class="line">    return this.props.children; </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="11-Ref-转发"><a href="#11-Ref-转发" class="headerlink" title="11.Ref 转发"></a>11.Ref 转发</h4><h5 id="11-1-ref转发是一个可选特性，其允许某些组件接收-ref，并将其向下传递（换句话说，“转发”它）给子组件。"><a href="#11-1-ref转发是一个可选特性，其允许某些组件接收-ref，并将其向下传递（换句话说，“转发”它）给子组件。" class="headerlink" title="11.1.ref转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。"></a>11.1.ref转发是一个可选特性，其允许某些组件接收 <code>ref</code>，并将其向下传递（换句话说，“转发”它）给子组件。</h5><p>在下面的示例中，<code>FancyButton</code> 使用 <code>React.forwardRef</code> 来获取传递给它的 <code>ref</code>，然后转发到它渲染的 DOM <code>button</code>：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">const FancyButton &#x3D; React.forwardRef((props, ref) &#x3D;&gt; (  </span><br><span class="line">  &lt;button ref&#x3D;&#123;ref&#125; className&#x3D;&quot;FancyButton&quot;&gt;    &#123;props.children&#125;</span><br><span class="line">  &lt;&#x2F;button&gt;</span><br><span class="line">));</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 你可以直接获取 DOM button 的 ref：</span><br><span class="line">const ref &#x3D; React.createRef();</span><br><span class="line">&lt;FancyButton ref&#x3D;&#123;ref&#125;&gt;Click me!&lt;&#x2F;FancyButton&gt;;</span><br></pre></td></tr></table></figure>

<h4 id="12-带-key-的-Fragments"><a href="#12-带-key-的-Fragments" class="headerlink" title="12.带 key 的 Fragments"></a>12.带 key 的 Fragments</h4><h5 id="12-1使用显式-lt-React-Fragment-gt-语法声明的片段可能具有-key。一个使用场景是将一个集合映射到一个-Fragments-数组-举个例子，创建一个描述列表："><a href="#12-1使用显式-lt-React-Fragment-gt-语法声明的片段可能具有-key。一个使用场景是将一个集合映射到一个-Fragments-数组-举个例子，创建一个描述列表：" class="headerlink" title="12.1使用显式 &lt;React.Fragment&gt; 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表："></a>12.1使用显式 <code>&lt;React.Fragment&gt;</code> 语法声明的片段可能具有 key。一个使用场景是将一个集合映射到一个 Fragments 数组 - 举个例子，创建一个描述列表：</h5><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function Glossary(props) &#123;</span><br><span class="line">  return (</span><br><span class="line">    &lt;dl&gt;</span><br><span class="line">      &#123;props.items.map(item &#x3D;&gt; (</span><br><span class="line">        &#x2F;&#x2F; 没有&#96;key&#96;，React 会发出一个关键警告</span><br><span class="line">        &lt;React.Fragment key&#x3D;&#123;item.id&#125;&gt;</span><br><span class="line">          &lt;dt&gt;&#123;item.term&#125;&lt;&#x2F;dt&gt;</span><br><span class="line">          &lt;dd&gt;&#123;item.description&#125;&lt;&#x2F;dd&gt;</span><br><span class="line">        &lt;&#x2F;React.Fragment&gt;</span><br><span class="line">      ))&#125;</span><br><span class="line">    &lt;&#x2F;dl&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="13-react路由"><a href="#13-react路由" class="headerlink" title="13.react路由"></a>13.react路由</h4><h5 id="13-1-hashRouter-和-BrowserRouter"><a href="#13-1-hashRouter-和-BrowserRouter" class="headerlink" title="13.1 hashRouter 和 BrowserRouter"></a>13.1 hashRouter 和 BrowserRouter</h5><p><code>hashRouter</code>:hash模式，带#号，刷新页面不会丢失</p>
<p><code>browserRouter</code>:历史记录模式，无#号，通过的是历史记录api来路由切换，刷新会丢失，本地模式不会。</p>
<h5 id="13-2-路由的使用"><a href="#13-2-路由的使用" class="headerlink" title="13.2 路由的使用"></a>13.2 路由的使用</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;Switch,Route,NavLink,withRouter,Redirect&#125; <span class="keyword">from</span> <span class="string">&#x27;react-router-dom&#x27;</span></span><br><span class="line"><span class="keyword">import</span> Home <span class="keyword">from</span> <span class="string">&#x27;./compoents/Home&#x27;</span></span><br><span class="line"><span class="keyword">import</span> User <span class="keyword">from</span> <span class="string">&#x27;./compoents/User&#x27;</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(props)</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &#123;<span class="comment">/* 导航跳转 */</span>&#125;</span><br><span class="line">      &lt;NavLink to=<span class="string">&quot;/home&quot;</span> &gt;home&lt;/NavLink&gt;</span><br><span class="line">      &lt;NavLink to=<span class="string">&quot;/user&quot;</span> &gt;user&lt;/NavLink&gt;</span><br><span class="line">      &#123;<span class="comment">/* js实现跳转 */</span>&#125;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;props.history.push(<span class="string">&#x27;/home&#x27;</span>)&#125;&#125;&gt;跳转到home&lt;/button&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;props.history.push(<span class="string">&#x27;/user&#x27;</span>)&#125;&#125;&gt;跳转到user&lt;/button&gt;</span><br><span class="line">      &lt;Switch&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/home&quot;</span>  component=&#123;Home&#125;&gt;&lt;/Route&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/user&quot;</span> component=&#123;User&#125;&gt;&lt;/Route&gt;</span><br><span class="line">        &#123;<span class="comment">/* 重定向 */</span>&#125;</span><br><span class="line">        &lt;Redirect <span class="keyword">from</span>=<span class="string">&quot;/&quot;</span> to=<span class="string">&quot;/home/a&quot;</span>&gt;&lt;/Redirect&gt;</span><br><span class="line">        </span><br><span class="line">      &lt;/Switch&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//withRouter  高阶组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> withRouter(App);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>home页面</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;Route,NavLink&#125; <span class="keyword">from</span> <span class="string">&#x27;react-router-dom&#x27;</span></span><br><span class="line"><span class="keyword">import</span> A <span class="keyword">from</span> <span class="string">&#x27;./home/A&#x27;</span></span><br><span class="line"><span class="keyword">import</span> B <span class="keyword">from</span> <span class="string">&#x27;./home/B&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">Home</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        我是home组件的内容</span><br><span class="line">        &lt;p&gt;---------------&lt;/p&gt;</span><br><span class="line">        &#123;<span class="comment">/* 路由嵌套 */</span>&#125;</span><br><span class="line">        &lt;NavLink to=<span class="string">&quot;/home/a&quot;</span>&gt;A&lt;/NavLink&gt;</span><br><span class="line">        &lt;NavLink to=<span class="string">&quot;/home/b&quot;</span>&gt;B&lt;/NavLink&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/home/a&quot;</span> component=&#123;A&#125; &gt;&lt;/Route&gt;</span><br><span class="line">        &lt;Route path=<span class="string">&quot;/home/b&quot;</span> component=&#123;B&#125; &gt;&lt;/Route&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="13-3-路由传参"><a href="#13-3-路由传参" class="headerlink" title="13.3.路由传参"></a>13.3.路由传参</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.通过params传参</span></span><br><span class="line">&lt;NavLink to=<span class="string">&quot;/user/xin&quot;</span> &gt;user&lt;/NavLink&gt;</span><br><span class="line">&lt;Route path=<span class="string">&quot;/user/:id?&quot;</span> component=&#123;User&#125;&gt;&lt;/Route&gt;</span><br><span class="line"><span class="comment">//在user页面通过以下方式</span></span><br><span class="line"><span class="built_in">this</span>.props.match.params.id</span><br><span class="line"></span><br><span class="line"><span class="comment">//2.通过query传参</span></span><br><span class="line">&#123;<span class="comment">/* query传参 */</span>&#125;</span><br><span class="line">&lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;<span class="built_in">this</span>.props.history.push(&#123;<span class="attr">pathname</span>:<span class="string">&#x27;/home/a&#x27;</span>,<span class="attr">query</span>:&#123;<span class="attr">name</span>:<span class="string">&#x27;xin&#x27;</span>&#125;&#125;)&#125;&#125; &gt;跳转A&lt;/button&gt;</span><br></pre></td></tr></table></figure>

<h4 id="14-hook"><a href="#14-hook" class="headerlink" title="14.hook"></a>14.hook</h4><h5 id="14-1hook是专门为无状态的组件产生状态"><a href="#14-1hook是专门为无状态的组件产生状态" class="headerlink" title="14.1hook是专门为无状态的组件产生状态"></a>14.1hook是专门为无状态的组件产生状态</h5><p>14.1.1基本使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React,&#123;useState,useEffect&#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">App</span>(<span class="params">props</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> [count,setCount] = useState(<span class="number">0</span>)</span><br><span class="line">  <span class="keyword">const</span> [count1,setCount1] = useState(&#123;<span class="attr">name</span>:<span class="string">&#x27;xin&#x27;</span>&#125;)</span><br><span class="line">  <span class="comment">//相当于componentDidMount 和 componentDidUpdate</span></span><br><span class="line">  useEffect(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">      &lt;p&gt;&#123;count&#125;&lt;/p&gt;</span><br><span class="line">      &lt;p&gt;&#123;count1.name&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="function">()=&gt;</span>&#123;setCount(count+<span class="number">1</span>)&#125;&#125;&gt;加一&lt;/button&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> App</span><br></pre></td></tr></table></figure>

<h4 id="15-redux"><a href="#15-redux" class="headerlink" title="15 redux"></a>15 redux</h4><h5 id="15-1-redux的基本使用"><a href="#15-1-redux的基本使用" class="headerlink" title="15.1.redux的基本使用"></a>15.1.redux的基本使用</h5><p>redux目录结构</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">redux</span><br><span class="line"> -store.js</span><br><span class="line"> -action.js</span><br><span class="line"> -reducer</span><br><span class="line">   -reducer.js</span><br><span class="line">   -reducer1.js</span><br><span class="line">    ...多个reducer</span><br><span class="line">   -index.js(合并reducer)</span><br></pre></td></tr></table></figure>

<p>Store.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;redux&#x27;</span></span><br><span class="line"><span class="comment">//引用reducer</span></span><br><span class="line"><span class="keyword">import</span> rootReducer <span class="keyword">from</span> <span class="string">&#x27;./reducer/index&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> store = createStore(rootReducer)</span><br></pre></td></tr></table></figure>

<p>Action.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义想要对store中数据进行的操作</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">updateName</span> (<span class="params">newName</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    type:<span class="string">&#x27;UPDATE&#x27;</span>,</span><br><span class="line">    data:newName</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Reducer.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//公共管理的数据类型二</span></span><br><span class="line"><span class="keyword">let</span> arr = [</span><br><span class="line">  <span class="number">1</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span></span><br><span class="line">]</span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">data</span>(<span class="params">state = arr, action</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">return</span> state</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Reducer2.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//公共管理的数据类型一</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;<span class="attr">name</span>:<span class="string">&#x27;xin&#x27;</span>,<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">data1</span>(<span class="params">state = obj, action</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (action.type) &#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="string">&quot;UPDATE&quot;</span> :&#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;<span class="attr">name</span>:action.data,<span class="attr">age</span>:<span class="number">18</span>&#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="keyword">return</span> state</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>Index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;combineReducers&#125; <span class="keyword">from</span> <span class="string">&#x27;redux&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;data&#125; <span class="keyword">from</span> <span class="string">&#x27;./reducer&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;data1&#125; <span class="keyword">from</span> <span class="string">&#x27;./reducer2&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> rootReducer = combineReducers(&#123;</span><br><span class="line">  data,</span><br><span class="line">  data1</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> rootReducer</span><br></pre></td></tr></table></figure>

<p>使用的文件.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="comment">//引用redux管理的数据</span></span><br><span class="line"><span class="keyword">import</span> &#123;store&#125; <span class="keyword">from</span> <span class="string">&#x27;../redux/store&#x27;</span></span><br><span class="line"><span class="comment">//导入全部的action中的方法</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> action <span class="keyword">from</span> <span class="string">&#x27;../redux/anction&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">User</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">props</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>(props)</span><br><span class="line">    <span class="built_in">this</span>.state = &#123;</span><br><span class="line">      inf:store.getState(),</span><br><span class="line">      <span class="comment">//获取指定reducer的数据</span></span><br><span class="line">      age:store.getState().data1.age</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">componentDidMount</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.props.match.params.id)</span><br><span class="line">     <span class="comment">//监听修改操作</span></span><br><span class="line">     store.subscribe(<span class="function">() =&gt;</span> &#123;<span class="built_in">this</span>.setState(&#123;</span><br><span class="line">      inf:store.getState()</span><br><span class="line">     &#125;)&#125;)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">handClick</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    store.dispatch(action.updateName(<span class="string">&#x27;xxxxx&#x27;</span>))</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        用户组件</span><br><span class="line">      &lt;p&gt;&#123;<span class="built_in">this</span>.state.inf.data1.name&#125;&lt;/p&gt;</span><br><span class="line">      &lt;button onClick=&#123;<span class="built_in">this</span>.handClick.bind(<span class="built_in">this</span>)&#125;&gt;更新store中的名字&lt;/button&gt;</span><br><span class="line">			&lt;p&gt;&#123;<span class="built_in">this</span>.state.age&#125;&lt;/p&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="16-React-redux"><a href="#16-React-redux" class="headerlink" title="16.React-redux"></a>16.React-redux</h4><h5 id="16-1-为了让redux更好的适应react，将-store-中的数据作为-props-绑定到组件上方便调用"><a href="#16-1-为了让redux更好的适应react，将-store-中的数据作为-props-绑定到组件上方便调用" class="headerlink" title="16.1 为了让redux更好的适应react，将 store 中的数据作为 props 绑定到组件上方便调用"></a>16.1 为了让redux更好的适应react，<u>将 store 中的数据作为 props 绑定到组件上方便调用</u></h5><p>16.1.1.<strong>react-redux核心</strong></p>
<ul>
<li><strong><provider store></provider></strong></li>
<li>connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])</li>
</ul>
<h5 id="16-2-react-redux的使用"><a href="#16-2-react-redux的使用" class="headerlink" title="16.2, react-redux的使用"></a>16.2, react-redux的使用</h5><p>16.2.1.想要引入redux库中的元素的组件</p>
<p>Test.jsx</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123; Component &#125; <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> action <span class="keyword">from</span> <span class="string">&#x27;../redux/anction&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;connect&#125; <span class="keyword">from</span>  <span class="string">&#x27;react-redux&#x27;</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Test</span> <span class="keyword">extends</span> <span class="title">Component</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">render</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &#123;<span class="built_in">this</span>.props.name&#125;</span><br><span class="line">        &#123;<span class="built_in">this</span>.props.age&#125;</span><br><span class="line">        &lt;button onClick=&#123;<span class="built_in">this</span>.props.update.bind(<span class="built_in">this</span>,<span class="string">&#x27;鑫哥哥&#x27;</span>)&#125;&gt;点击改变reducer中姓名&lt;/button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    )</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//映射store.getState()到props中</span></span><br><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">state</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span>&#123;</span><br><span class="line">    name:state.data1.name,</span><br><span class="line">    age:state.data1.age</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//映射修改触发函数</span></span><br><span class="line"><span class="keyword">const</span> mapDispatchToProps = <span class="function">(<span class="params">dispatch</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span>&#123;</span><br><span class="line">    <span class="comment">//props中的调用名     //触发action中的函数</span></span><br><span class="line">    update:<span class="function">(<span class="params">name</span>)=&gt;</span>&#123;dispatch(action.updateName(name))&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//连接store 和 这些出发函数</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps, mapDispatchToProps)(Test)</span><br></pre></td></tr></table></figure>

<p>Index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> ReactDOM <span class="keyword">from</span> <span class="string">&#x27;react-dom&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;HashRouter&#125; <span class="keyword">from</span> <span class="string">&#x27;react-router-dom&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;Provider&#125; <span class="keyword">from</span> <span class="string">&#x27;react-redux&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123;store&#125; <span class="keyword">from</span> <span class="string">&#x27;./redux/store&#x27;</span></span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">    &lt;Provider store=&#123;store&#125;&gt;</span><br><span class="line">      &lt;HashRouter&gt;</span><br><span class="line">        &lt;App /&gt;</span><br><span class="line">      &lt;/HashRouter&gt;</span><br><span class="line">    &lt;/Provider&gt;,</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">&#x27;root&#x27;</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h4 id="17"><a href="#17" class="headerlink" title="17"></a>17</h4>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/react/" data-id="ckhmnwyu700076rx42933dh2f" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-vue" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/vue/" class="article-date">
  <time datetime="2020-11-03T07:25:38.866Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/03/vue/">Vue基础知识笔记</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="指令"><a href="#指令" class="headerlink" title="指令"></a>指令</h3><p>本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作</p>
<h4 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h4><p>动态更新数据，将数据解析为纯文本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-text</span>=<span class="string">&quot;msg&quot;</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h4><p>更新元素的 innerHTML，将数据解析成html标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">v-html</span>=<span class="string">&quot;msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a>v-bind</h4><p>绑定属性：简写 ‘ : ’</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:title</span>=<span class="string">&quot;messeage&quot;</span>&gt;</span>&#123;&#123;messeage&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-on"><a href="#v-on" class="headerlink" title="v-on"></a>v-on</h4><p>绑定事件：简写”@”</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;handClick&quot;</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>v-on的事件修饰符：</p>
<ul>
<li><p><code>.stop</code> <strong>阻止冒泡</strong>，调用 event.stopPropagation() // 比如说一个div下有一个弹窗和一个表单 点击提交按钮点击了<input type="submit" />提交表单信息 点击弹出层周边空白区域，关闭弹窗 ，当表单显示在弹窗层上方时，为防止弹窗被意外关闭，需要阻止表单提交按钮冒泡行为</p>
</li>
<li><p><code>.prevent</code> <strong>阻止默认事件</strong>，调用 event.preventDefault() // 比如说点击了链接标签a,在跳转之前，要修改一些URL参数 </p>
</li>
<li><p><code>.capture</code> 添加事件侦听器时使用事件<code>捕获</code>模式  // 捕获阶段先于冒泡，如果在尽量顶层处理事件，然后阻止传播，可以略微节约性能开销。scroll/resize 这类可能连续触发的事件不冒泡的原因</p>
</li>
<li><p><code>.self</code> <strong>只当事件在该元素本身（比如不是子元素）触发时触发回调</strong></p>
</li>
<li><p><code>.once</code> <strong>事件只触发一次</strong></p>
</li>
<li><p>按键修饰符</p>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> &lt;input v-on:keyup.13&#x3D;&quot;submit&quot;&gt; </span><br><span class="line">记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：</span><br><span class="line"> &lt;input v-on:keyup.enter&#x3D;&quot;submit&quot;&gt;</span><br><span class="line"> &lt;input @keyup.enter&#x3D;&quot;submit&quot;&gt;</span><br><span class="line"> 按键别名包括：.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right.ctrl .shift .meta（windows 键，mac-command 键，)</span><br></pre></td></tr></table></figure>



<h4 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h4><p>在表单元素上创建双向数据绑定,监听用户的输入事件以更新数据</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 动态双向帮定 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;msg&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 复选框传递绑定数组 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">value</span>=<span class="string">&quot;01&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;ok&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;checkbox&quot;</span> <span class="attr">value</span>=<span class="string">&quot;02&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;ok&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 单选框绑定 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;radio&quot;</span> <span class="attr">value</span>=<span class="string">&quot;冲&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;en&quot;</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 密码 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> <span class="attr">v-model</span>=<span class="string">&quot;en1&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h4><p>循环</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">&quot;item in items&quot;</span>&gt;</span></span><br><span class="line">  &#123;&#123; item.text &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 遍历数组 item 为当前项，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, index) in list&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;index&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--遍历对象 item 为值，key 为键，index 为索引 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;(item, key, index) in obj&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125; -- &#123;&#123;key&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 遍历常量 item为从1开始的递增值 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">&quot;item in 10&quot;</span>&gt;</span>&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="动态绑定class-style"><a href="#动态绑定class-style" class="headerlink" title="动态绑定class,style"></a>动态绑定class,style</h4><ul>
<li>动态绑定class</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 对象的方式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:class</span>=<span class="string">&quot;&#123;active:true&#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 数组的方式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:class</span>=<span class="string">&quot;[&#x27;active&#x27;,&#x27;toggle&#x27;]&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 数组对象一起 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">:class</span>=<span class="string">&quot;[&#123;active:true&#125;,&#x27;ok&#x27;]&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>动态绑定style</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- style --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 1 对象书写方式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">&quot;&#123; color: activeColor, fontSize: fontSize + &#x27;px&#x27; &#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 2 数组书写方式--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-bind:style</span>=<span class="string">&quot;[baseStyles, overridingStyles]&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-if-v-show"><a href="#v-if-v-show" class="headerlink" title="v-if,v-show"></a>v-if,v-show</h4><ul>
<li><p><code>v-if</code>：根据表达式的值的真假条件，【销毁或重建元素 】<strong>v-if适合条件不大可能改变的场景</strong></p>
</li>
<li><p><code>v-show</code>：根据表达式之真假值，【切换元素的 display CSS 属性】dom元素一直在 <strong>v-show适合频繁切换</strong></p>
</li>
</ul>
<h4 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak"></a>v-cloak</h4><p>这个指令保持在元素上直到关联实例结束编译</p>
<p>防止刷新页面，网速慢的情况下出现等数据格式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-cloak</span>&gt;</span></span><br><span class="line">  &#123;&#123; message &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h4 id="v-pre"><a href="#v-pre" class="headerlink" title="v-pre"></a>v-pre</h4><p>跳过这个元素和它的子元素的编译过程。<strong>可以用来显示原始 Mustache 标签</strong>。跳过大量没有指令的节点会加快编译。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-pre</span>&gt;</span>&#123;&#123;you are my sun shy&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</h4><p><strong>只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过</strong>。这可以用于优化更新性能。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-once</span>&gt;</span>This will never change: &#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="watch：监听属性值的变化"><a href="#watch：监听属性值的变化" class="headerlink" title="watch：监听属性值的变化"></a>watch：监听属性值的变化</h4><p>watch 的一个特点是，最初绑定的时候是不会执行的，要等到数据改变时才执行监听计算，那我们想要一开始就让他最初绑定，加一个属性immediate:true 即可。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  firstName: &#123;</span><br><span class="line">    <span class="comment">//参数名字不可更改,函数名字也是固定的</span></span><br><span class="line">    <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">this</span>.fullName = newName + <span class="string">&#x27; &#x27;</span> + <span class="built_in">this</span>.lastName;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法</span></span><br><span class="line">    immediate: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> deep属性:</p>
<p>默认情况下 ,handler函数只会监听外层变化，当监听的是一个对象时，我们要深入的去监听属性值的变化们就要用到deep属性。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">   obj: &#123;</span><br><span class="line">     <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;obj.a changed&#x27;</span>);</span><br><span class="line">     &#125;,</span><br><span class="line">     immediate: <span class="literal">true</span>，</span><br><span class="line">　　　 deep:<span class="literal">true</span>,</span><br><span class="line">   &#125;</span><br><span class="line"> &#125; </span><br></pre></td></tr></table></figure>

<p><code>deep</code>的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改<code>obj</code>里面任何一个属性都会触发这个监听器里的 handler。</p>
<p>优化：以字符串的形式监听：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  <span class="string">&#x27;firstName.a&#x27;</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(newName)</span><br><span class="line">    &#125;,</span><br><span class="line">    immediate: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>



<h4 id="组件的生命周期"><a href="#组件的生命周期" class="headerlink" title="组件的生命周期"></a>组件的生命周期</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">每个阶段可以做的事情</span><br><span class="line"></span><br><span class="line">    beforeCreate   <span class="comment">//可以在这加个loading事件，</span></span><br><span class="line">    created       <span class="comment">// 在这里结束loading事件，发送异步请求</span></span><br><span class="line">    beforeMount</span><br><span class="line">    mounted        <span class="comment">//操作dom</span></span><br><span class="line">    beforeUpdate</span><br><span class="line">    updated        <span class="comment">//对更新后的数据统一处理</span></span><br><span class="line">    beforeDestroy  <span class="comment">//清除定时器,清除无用的全局缓存数据  这一步，实例仍然完全可用。</span></span><br><span class="line">    destroyed      Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。</span><br></pre></td></tr></table></figure>

<h4 id="父子组件的通信"><a href="#父子组件的通信" class="headerlink" title="父子组件的通信"></a>父子组件的通信</h4><ul>
<li>父传子</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;Son  :msg=<span class="string">&#x27;msg&#x27;</span>/&gt;</span><br><span class="line"><span class="comment">//子组件</span></span><br><span class="line">props:&#123;</span><br><span class="line">   		msg	:&#123;</span><br><span class="line">      type:<span class="built_in">String</span>,</span><br><span class="line">      <span class="keyword">default</span>:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>子传父</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//子组件</span></span><br><span class="line">&lt;button @click=<span class="string">&quot;sendFather&quot;</span>&gt;传递<span class="number">100</span>给父组件&lt;/button&gt; </span><br><span class="line">methods:&#123;</span><br><span class="line">  <span class="comment">//自组件通过自定义事件</span></span><br><span class="line">    <span class="function"><span class="title">sendFather</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">       <span class="built_in">this</span>.$emit(<span class="string">&#x27;customEvent&#x27;</span>,<span class="number">100</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//父组件</span></span><br><span class="line">&lt;Son  :msg=<span class="string">&#x27;msg&#x27;</span> @customEvent=<span class="string">&#x27;handSon&#x27;</span>/&gt;</span><br><span class="line"> methods:&#123;</span><br><span class="line">   <span class="function"><span class="title">handSon</span>(<span class="params">value</span>)</span>&#123;</span><br><span class="line">     alert(value)</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>

<p>$parent:调用父组件的方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;自组件</span><br><span class="line">&lt;button @click&#x3D;&quot;fn2&quot;&gt;调用父组件的方法&lt;&#x2F;button&gt;</span><br><span class="line">methods:&#123;</span><br><span class="line">fn2() &#123;</span><br><span class="line">	this.$parent.fn()</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#x2F;&#x2F;父组件</span><br><span class="line">methods:&#123;</span><br><span class="line">fn()&#123;</span><br><span class="line">	alert(&#39;我是父组件的方法&#39;)</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h4><p>计算属性，对表达式进行抽取，简化模版中的代码</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//简化&#123;&#123;&#125;&#125;中表达式</span></span><br><span class="line">&lt;p style=<span class="string">&quot;color:red&quot;</span>&gt;&#123;&#123;handNum&#125;&#125;&lt;/p&gt;</span><br><span class="line"><span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span>&#123;</span><br><span class="line">      num:<span class="number">4</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">computed:&#123;</span><br><span class="line">  <span class="function"><span class="title">handNum</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> (<span class="built_in">this</span>.num+<span class="number">4</span>)/<span class="number">2</span>*<span class="number">2342</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="methods"><a href="#methods" class="headerlink" title="methods"></a>methods</h4><p>​    定义方法的位置</p>
<h4 id="props"><a href="#props" class="headerlink" title="props"></a>props</h4><p>定义接受父组件传递的信息</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">  	<span class="comment">//对应传过来的变量的名字</span></span><br><span class="line">    msg:&#123;</span><br><span class="line">      type:<span class="built_in">String</span>,</span><br><span class="line">      <span class="keyword">default</span>:<span class="string">&#x27;222&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<h4 id="路由模块"><a href="#路由模块" class="headerlink" title="路由模块"></a>路由模块</h4><ul>
<li><p>路由配置</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//嵌套路由</span></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: User,</span><br><span class="line">      children: [</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 当 /user/:id/profile 匹配成功，</span></span><br><span class="line">          <span class="comment">// UserProfile 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          path: <span class="string">&#x27;profile&#x27;</span>,</span><br><span class="line">          component: UserProfile</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          <span class="comment">// 当 /user/:id/posts 匹配成功</span></span><br><span class="line">          <span class="comment">// UserPosts 会被渲染在 User 的 &lt;router-view&gt; 中</span></span><br><span class="line">          path: <span class="string">&#x27;posts&#x27;</span>,</span><br><span class="line">          component: UserPosts</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line">--------------</span><br><span class="line">routes: [</span><br><span class="line">    <span class="comment">// 动态路径参数 以冒号开头</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/user/:id&#x27;</span>, <span class="attr">component</span>: User &#125;</span><br><span class="line">  ]</span><br><span class="line">-------------</span><br><span class="line">  watch: &#123;</span><br><span class="line">    $route(to, <span class="keyword">from</span>) &#123;</span><br><span class="line">      <span class="comment">// 对路由变化作出响应...</span></span><br><span class="line">      <span class="comment">//过度动画什么的</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">--------------</span><br><span class="line"><span class="comment">//比如做404页面的时候</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="comment">// 会匹配所有路径</span></span><br><span class="line">  path: <span class="string">&#x27;*&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">&#123;</span><br><span class="line">  <span class="comment">// 会匹配以 `/user-` 开头的任意路径</span></span><br><span class="line">  path: <span class="string">&#x27;/user-*&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>页面导航，占位</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-link to=<span class="string">&quot;/sch/home&quot;</span> &gt;学校概况&lt;/router-link&gt;</span><br><span class="line">&lt;router-view :school_id1=<span class="string">&quot;school_id1&quot;</span> /&gt;</span><br><span class="line"><span class="comment">//链接一个命名路由</span></span><br><span class="line">&lt;router-link :to=<span class="string">&quot;&#123; name: &#x27;user&#x27;, params: &#123; userId: 123 &#125;&#125;&quot;</span>&gt;User&lt;/router-link&gt;</span><br><span class="line"><span class="comment">//等价于这个</span></span><br><span class="line">router.push(&#123; <span class="attr">name</span>: <span class="string">&#x27;user&#x27;</span>, <span class="attr">params</span>: &#123; <span class="attr">userId</span>: <span class="number">123</span> &#125;&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>更改路由地址</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">方式1：直接修改地址栏</span><br><span class="line">方式2：this.$router.push(&#123;path: &#39;&#x2F;home&#39;, query: &#123;id: &quot;2&quot;&#125;&#125;);</span><br><span class="line">方式3：&lt;router-link to&#x3D;&quot;路由地址&quot;&gt;&lt;&#x2F;router-link&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>命名视图(有时候想同时 (同级) 展示多个视图，而不是嵌套展示)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;router-view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;view one&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;view two&quot;</span> name=<span class="string">&quot;a&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;router-view <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;view three&quot;</span> name=<span class="string">&quot;b&quot;</span>&gt;&lt;/router-view&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">      components: &#123;</span><br><span class="line">        <span class="keyword">default</span>: Foo,</span><br><span class="line">        a: Bar,</span><br><span class="line">        b: Baz</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br><span class="line">                             </span><br></pre></td></tr></table></figure>
</li>
<li><p>别名（**<code>/a</code> 的别名是 <code>/b</code>，意味着，当用户访问 <code>/b</code> 时，URL 会保持为 <code>/b</code>，但是路由匹配则为 <code>/a</code>，就像用户访问 <code>/a</code> 一样。**）</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    <span class="comment">//b是a的别名</span></span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">component</span>: A, <span class="attr">alias</span>: <span class="string">&#x27;/b&#x27;</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<ul>
<li><p>重定向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> VueRouter(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123; <span class="attr">path</span>: <span class="string">&#x27;/a&#x27;</span>, <span class="attr">redirect</span>: <span class="string">&#x27;/b&#x27;</span> &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>路由过度动画</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 使用动态的 transition name --&gt;</span><br><span class="line">&lt;transition :name=<span class="string">&quot;transitionName&quot;</span>&gt;</span><br><span class="line">  &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">&lt;/transition&gt;</span><br><span class="line"></span><br><span class="line">---------------------------</span><br><span class="line"><span class="comment">// 接着在父组件内</span></span><br><span class="line"><span class="comment">// watch $route 决定使用哪种过渡</span></span><br><span class="line">watch: &#123;</span><br><span class="line">  <span class="string">&#x27;$route&#x27;</span> (to, <span class="keyword">from</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> toDepth = to.path.split(<span class="string">&#x27;/&#x27;</span>).length</span><br><span class="line">    <span class="keyword">const</span> fromDepth = <span class="keyword">from</span>.path.split(<span class="string">&#x27;/&#x27;</span>).length</span><br><span class="line">    <span class="built_in">this</span>.transitionName = toDepth &lt; fromDepth ? <span class="string">&#x27;slide-right&#x27;</span> : <span class="string">&#x27;slide-left&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h4><p>Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。</p>
<p>vuex解决了组件之间同一状态的共享问题。多个组件依赖于同一状态。</p>
<p>![屏幕快照 2020-09-29 上午8.28.31](/Users/niruoshangzaichang/Desktop/屏幕快照 2020-09-29 上午8.28.31.png)</p>
<p>store文件夹下index.js的结构目录</p>
<p>state (类似存储全局变量的数据)<br>getters (提供用来获取state数据的方法)<br>actions (提供跟后台接口打交道的方法，并调用mutations提供的方法)—异步【dispatch触发】<br>mutations (提供存储设置state数据的方法)–同步【用commit触发】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createStore(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  getters:&#123;</span><br><span class="line">    <span class="comment">//定义方法获取state中的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    <span class="comment">//同步修改state中的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    <span class="comment">//异步修改state中的数据</span></span><br><span class="line">  &#125;,</span><br><span class="line">  modules: &#123;</span><br><span class="line">    <span class="comment">//分块store，防止臃肿</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>案例：</p>
<p>Store/index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createStore &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> createStore(&#123;</span><br><span class="line">  state: &#123;</span><br><span class="line">    <span class="comment">//数据源</span></span><br><span class="line">    name:<span class="string">&#x27;xin&#x27;</span></span><br><span class="line">  &#125;,</span><br><span class="line">  getters:&#123;</span><br><span class="line">    <span class="comment">//获取数据</span></span><br><span class="line">    <span class="function"><span class="title">getName</span>(<span class="params">state</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> state.name</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    <span class="comment">//自定义方法，同步修改数据</span></span><br><span class="line">    setName (state, value) &#123;</span><br><span class="line">      state.name = value</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    <span class="comment">//异步的提交修改（调用mutations中的方法）</span></span><br><span class="line">    <span class="function"><span class="title">asyncSetName</span>(<span class="params">&#123;commit,state&#125;, value</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">        commit(<span class="string">&#x27;setName&#x27;</span>,value)</span><br><span class="line">      &#125;,<span class="number">1000</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  modules: &#123;</span><br><span class="line">    <span class="comment">//分治模块</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>App.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;&#123;&#123;getName&#125;&#125;&lt;/p&gt;</span><br><span class="line">&lt;button @click=<span class="string">&quot;setName&quot;</span>&gt;同步修改store中的数据&lt;/button&gt;</span><br><span class="line">&lt;button @click=<span class="string">&quot;asyncSetName&quot;</span>&gt;异步修改store中的数据&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">computed:&#123;</span><br><span class="line">    <span class="comment">// 获取vuex中的数据</span></span><br><span class="line">    <span class="function"><span class="title">getName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.$store.getters.getName</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    <span class="comment">//设置methods中的数据</span></span><br><span class="line">    <span class="function"><span class="title">setName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.$store.commit(<span class="string">&#x27;setName&#x27;</span>,<span class="string">&#x27;xinxinxinxin&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="title">asyncSetName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.$store.dispatch(<span class="string">&#x27;asyncSetName&#x27;</span>,<span class="string">&#x27;我是修改后的异步&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="mapState、mapGetters、mapActions，mapMutations的作用"><a href="#mapState、mapGetters、mapActions，mapMutations的作用" class="headerlink" title="mapState、mapGetters、mapActions，mapMutations的作用"></a>mapState、mapGetters、mapActions，mapMutations的作用</h4><p>很多时候 , this.<code>$store.getters.setName() 、this.$store.dispatch()这种写法不方便 ,使用 </code>mapState、mapGetters、mapActions` ,mapMutations就不会这么复杂了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;p&gt;&#123;&#123;getName1&#125;&#125;&lt;/p&gt;</span><br><span class="line">    &lt;button @click=<span class="string">&quot;setName1&quot;</span>&gt;同步修改store中的数据&lt;/button&gt;</span><br><span class="line">    &lt;button @click=<span class="string">&quot;asyncSetName1&quot;</span>&gt;异步修改store中的数据&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> &#123; mapGetters, mapActions, mapState, mapMutations &#125; <span class="keyword">from</span> <span class="string">&quot;vuex&quot;</span>;</span><br><span class="line">  computed:&#123;</span><br><span class="line">    <span class="comment">// 获取vuex中的数据</span></span><br><span class="line">    <span class="comment">// getName()&#123;</span></span><br><span class="line">    <span class="comment">//   return this.$store.getters.getName</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    ...mapGetters([<span class="string">&#x27;getName&#x27;</span>]),</span><br><span class="line">    <span class="function"><span class="title">getName1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">this</span>.getName</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    <span class="comment">//设置methods中的数据</span></span><br><span class="line">    <span class="comment">// setName1()&#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.commit(&#x27;setName&#x27;,&#x27;xinxinxinxin&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;,</span></span><br><span class="line">    ...mapMutations([<span class="string">&#x27;setName&#x27;</span>]),</span><br><span class="line">    <span class="function"><span class="title">setName1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.setName(<span class="string">&#x27;asdad&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// asyncSetName()&#123;</span></span><br><span class="line">    <span class="comment">//   this.$store.dispatch(&#x27;asyncSetName&#x27;,&#x27;我是修改后的异步&#x27;)</span></span><br><span class="line">    <span class="comment">// &#125;</span></span><br><span class="line">    ...mapActions([<span class="string">&#x27;asyncSetName&#x27;</span>]),</span><br><span class="line">    <span class="function"><span class="title">asyncSetName1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.asyncSetName(<span class="string">&#x27;keyi &#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>












      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/vue/" data-id="ckhmnwyu000056rx4btvxddj1" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-async" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/async/" class="article-date">
  <time datetime="2020-11-03T06:52:16.047Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/03/async/">JS异步编程的三种方案</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="js的异步编程编程解决方案"><a href="#js的异步编程编程解决方案" class="headerlink" title="js的异步编程编程解决方案"></a>js的异步编程编程解决方案</h4><h5 id="1，回调函数"><a href="#1，回调函数" class="headerlink" title="1，回调函数"></a>1，回调函数</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">callback</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">let</span> a = <span class="number">0</span>;</span><br><span class="line">  <span class="comment">//异步处理</span></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">		a++;</span><br><span class="line">  &#125;,<span class="number">100</span>)</span><br><span class="line">  callback(a);<span class="comment">//在函数声明的内部调用回调函数</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//参数为callback函数的定义</span></span><br><span class="line">fn(<span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(data);<span class="comment">//拿到了 fn函数内部调用callbac穿过了来的参数 a++</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="2，promise"><a href="#2，promise" class="headerlink" title="2，promise"></a>2，promise</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">try</span>&#123;</span><br><span class="line">    <span class="comment">//异步代码</span></span><br><span class="line">  <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">//成功的回调并传递参数1</span></span><br><span class="line">    resolve(<span class="number">1</span>)</span><br><span class="line">  &#125;,<span class="number">1000</span>)</span><br><span class="line">  &#125;<span class="keyword">catch</span>&#123;</span><br><span class="line">    reject(err)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(res)</span><br><span class="line">&#125;).catch(<span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="3-async-，await配合使用"><a href="#3-async-，await配合使用" class="headerlink" title="3,async ，await配合使用"></a>3,async ，await配合使用</h5><ul>
<li><p>Async 申明一个异步函数，并且函数的返回值为promise对象</p>
</li>
<li><p>await 必须在async申明的函数中使用，await 后跟一个基于promise的函数，并且等待基于promise的函数的执行结果，返回给前者。</p>
<p><code>let a = await Promise.resove(1)</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">  &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">  &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br><span class="line">  &lt;title&gt;Document&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    <span class="comment">// async返回的是一个promise对象  await 等待一个异步的代码执行后的结果</span></span><br><span class="line">    <span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="comment">//声名promise 并赋值给fn1</span></span><br><span class="line">      <span class="keyword">let</span> fn1 = <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">          resolve(<span class="number">1</span>)</span><br><span class="line">        &#125;,<span class="number">1000</span>)</span><br><span class="line">      &#125;)</span><br><span class="line">      <span class="comment">//声名一个异步函数</span></span><br><span class="line">      <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">//等待一个基于promsie的结果</span></span><br><span class="line">        <span class="keyword">let</span> a = <span class="keyword">await</span> fn1;</span><br><span class="line">        <span class="built_in">console</span>.log(a)  <span class="comment">//1</span></span><br><span class="line">        <span class="comment">//返回这个promise 对象</span></span><br><span class="line">        <span class="keyword">return</span> a</span><br><span class="line">      &#125;</span><br><span class="line">      fn().then(<span class="function"><span class="params">res</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(res)  <span class="comment">// 1</span></span><br><span class="line">      &#125;)</span><br><span class="line">      </span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/script&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/async/" data-id="ckhmnwytt00006rx4awcz11fp" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-computer" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/computer/" class="article-date">
  <time datetime="2020-11-03T06:52:16.047Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/03/computer/">计算机网路笔记</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="计算机网络"><a href="#计算机网络" class="headerlink" title="计算机网络"></a>计算机网络</h3><h4 id="1，网络层"><a href="#1，网络层" class="headerlink" title="1，网络层"></a>1，网络层</h4><ul>
<li><p>网络层的功能：</p>
<blockquote>
<ul>
<li>异构网络互联</li>
</ul>
<blockquote>
<p>通过中间设备（网络层：路由器），把复杂的网络结构连接起来</p>
</blockquote>
<ul>
<li>路由与转发</li>
</ul>
<blockquote>
<ul>
<li>1, 路由选择：按照复杂的分布式算法，根据从各相邻路由器得到整个网络拓扑的变化情况，转发相关的队列队列管理，任务调度等等。</li>
<li>2,路由转发：根据路由转发表，将用户的IP数据报，从合适的端口转发出去</li>
</ul>
</blockquote>
<ul>
<li>拥塞控制</li>
</ul>
<blockquote>
<p>判断网络负载与吞吐量的关系，从而确定网络是否处于拥塞状态，进而通过，开环控制或者闭环控制来防止拥塞。</p>
<ul>
<li>开环控制：一种静态的（事先考虑可能的拥赛因素），一旦网络系统启动，中途就不能修改。</li>
<li>闭环控制：一种动态的（采用网络监控系统，实时的监控拥塞位置），拥塞控制方法。</li>
</ul>
</blockquote>
</blockquote>
</li>
<li><p>路由算法</p>
<blockquote>
<ul>
<li>1,静态路由算法（非自适应路由算法）：人工配置路由信息。</li>
<li>2,动态路由算法（自适应路由算法）：路由器上的路由表项是通过相互连接的路由器之间彼此交换信息，按照一定的算法优化出来。</li>
<li>动态路由算法分类：</li>
</ul>
<blockquote>
<ul>
<li>距离-向量路由算法</li>
</ul>
<blockquote>
<p>迭代计算一条路由中的站段数或延迟时间，从而得到到达一个目标的最短（最小代价）通路，代表的协议：RIP</p>
</blockquote>
<ul>
<li>链路状态路由算法</li>
</ul>
<blockquote>
<p>一个节点检查所有节点的链路状态，并且把的到的信息发送给网络上的其他所有节点，一旦网络发生变化，节点就对跟新的网络图，利用Dijsktra最短路径算法重新计算路由。</p>
</br>
**特点**：</br>
1，利用洪泛发向本治系统所有路由器发送信息，  
2，发送的信息是与相邻所有路由器的链路状态（度量），对于OSPF，度量是：费用，距离，时延，带宽。  
3，只有链路状态发生变化时，才会向所有路由器发送此消息。  
相比距离-向量算法的优点：  
1，每个路由器都使用原始状态的数据，独立的计算路径，不依赖中间节点的计算  
2，链路状态不加改变的传播，更有利于查找故障。
3，有更好的规模可延展性。

<ul>
<li>层次路由<br>将整个互联网划分成不同的自制系统，每个自制系统内部可以有各自的路由协议。  </li>
</ul>
<ul>
<li>IGP（内部网关协议）<br>自制系统内部使用的关协议，RIP，OSPF等  </li>
<li>EGP（外部网关协议）<br>不同自制系统之间路由交换协议，负责在路由间选择最优路径，BGP等</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
</li>
<li><p>IPV4</p>
<blockquote>
<p><strong>1,IP的组成：首部（20B）+数据报</strong><br>首部组成:  </p>
<ul>
<li>版本：4位</li>
<li>首部长度：4位，以4B为单位，最大15*4=60B，一般首部长度常用的是20B</li>
<li>总长度：16位，以1B位单位，最大长度位2^16-1=65535B,由于以太网帧的最大长度位1500B，所以ip报文分组的最大长度不能超过1500B，</li>
<li>标志：3位，最后一位表示MF，MF=1，表示后面还有分片，MF=0表示后面无分片，中间一位表示DF，只有DF=0，才允许分片，第一位没什么意义。</li>
<li>首部验和：16位，只校验首部，不校验数据部分</li>
<li>生存时间（TTL）：8位，转发分组前，TTl-1，通过一个路由器，TTL-1，直到剪为0，寿命结束。</li>
<li>协议：8位，比如：6表示TCP，17表示UDP</li>
<li>片偏移：13位，以8B位单位。  </li>
</ul>
</blockquote>
<blockquote>
<p><strong>2,IPV4地址分类</strong></p>
<ul>
<li>分为A，B，C，D，E五类<br>IPV4地址由 网络号+主机号组成。</li>
</ul>
</blockquote>
</li>
</ul>
<blockquote>
<p>–代表：网络号，++代表主机号</p>
<table>
<thead>
<tr>
<th>分类</th>
<th>格式</th>
<th>主机的最大个数</th>
<th>最大的网络数</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>A类</td>
<td>0——- +++++++ ++++++++ ++++++++</td>
<td>2^24-2个</td>
<td>2^7-2个</td>
<td></td>
</tr>
<tr>
<td>B类</td>
<td>10—— ——- ++++++++ ++++++++</td>
<td>2^16-2个</td>
<td>2^14-2个</td>
<td></td>
</tr>
<tr>
<td>C类</td>
<td>110—– ——- ——– ++++++++</td>
<td>2^8-2个</td>
<td>2^21-2个</td>
<td></td>
</tr>
<tr>
<td>D类</td>
<td>1110     多播地址</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>E类</td>
<td>1111 保留使用</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
</blockquote>
<ul>
<li><p>网络地址转换：（NAT）</p>
<blockquote>
<p>为了解决网络的IP地址不够用的问题<br><strong>实现原理</strong>：将专用的网路地址转化成公用地址，使得整个专用网只需要一个共有IP就能够与internet连接。从而大大增加了IP的复用。</p>
<ul>
<li>NAT转换表示例：</li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>WLAN</th>
<th>LAN</th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>138.76.29.7:5001</td>
<td>192.168.0.2:5060</td>
<td></td>
<td></td>
</tr>
<tr>
<td>138.76.29.7:451</td>
<td>192.168.8.241:2314</td>
<td></td>
<td></td>
</tr>
</tbody></table>
</blockquote>
</li>
<li><p>子网掩码和CIDR（无分类域间路由选择）</p>
<blockquote>
<ul>
<li>子网掩码<br>1,子网划分：将主机号再进行划分成《子网号》+《主机号》<br>2,子网的网络地址：IP地址 AND 子网掩码<br>3,子网掩码：A类：255.0.0.0，B类：255.255.0.0，C类：255.255.255.0</li>
<li>CIDR<br>IP = {&lt;网络前缀&gt;，《主机号》}<br>网络前缀的计算：比如对于128.14.3.25/20这个地址。子网掩码就是20个1加12个0组成，然后与这个地址与运算，截取前20位，就是网络前缀。最后网络前缀和主机号拼接，就是IP的CIDR。 </li>
<li>三个协议：ARP,DHCP,ICMP<br>1,ARP：地址解析解析，解决IP–&gt;MAc地址的映射<br>2,DHCP:动态主机配置协议，给主机动态的分配IP地址<br>3，ICMP：网际控制报文协议，让主机或者路由器发送差错报文和异常情况。</li>
</ul>
</blockquote>
</li>
<li><p>IPv6地址：</p>
<blockquote>
<p>1,解决IP地址耗尽的问题：1，采用CIDR，2，采用NAT转换，3，采用IPv6地址方式。<br>2,IPv6是16B，128位，是IPv4的平方<br>3,IPv6:4位用1位16进制数表示，每四个16位用：分隔开，例如：4BF5:AA12:1245:BFA4:DE24:456F:FDE4:345D</p>
</blockquote>
</li>
<li><p>路由协议：</p>
</li>
</ul>
<hr>
<h3 id="2，传输层"><a href="#2，传输层" class="headerlink" title="2，传输层"></a>2，传输层</h3><ul>
<li><p>网络层提供了主机之间的逻辑通信，而传输层提供了不同进程之间的逻辑通信。</p>
</li>
<li><p>复用：不同应用进程都可以使用同一种传输协议发送数据。</p>
</li>
<li><p>分用：接收方的传输层剥去报文首部后，能把数据正确的交付到目的应用进程。</p>
</li>
<li><p>端口：标识不同应用进程，16位，总共能标识65536种不同的端口号。</p>
<blockquote>
<p>1,服务器使用端口号：0-1023<br>2,客户端使用端口号：49152-65536</p>
</blockquote>
</li>
<li><p>套接字（Socket）：套接字 =（主机IP地址 ，端口号）</p>
</li>
<li><p>UDP：</p>
<blockquote>
<p>1,功能：在IP数据报服务之上提供可复用，分用，差错检验的功能<br>2,UDP提供的是最大努力的不可靠的交付<br>3,UDP数据报组成：头部+数据</p>
<ul>
<li>头部组成：<br>1,源端口 2B，<br>2,目的端口：2B<br>3,UDP 数据报的长度。最小值是8，校验和2B</li>
<li>UDP数据校验：在UDP数据报前增加12B的伪首部。</li>
</ul>
</blockquote>
</li>
<li><p>TCP 协议</p>
<blockquote>
<ul>
<li>特点：<br>1,点对点<br>2,可靠交付<br>3,TCP提供全双工通信<br>4,TCP面向的是字流</li>
<li>TCP报文组成：首部（20B） + 数据报<br>1, 源端口：2B<br>2, 目的端口：2B<br>3, 序号字段：4B，数据流中每一个字号都会编上字段<br>4, 确认号字段：4B，希望收到下一个字节的第一个序号<br>5, 数据偏移：4 位，Tcp报文段距离首部的距离。<br>6, 保留字段 6位，保留今后使用<br>7, WRL；1位 紧急位，URL= 1，表示该字段数据紧急，应尽快送达<br>8, <strong>==ACK:确认位，ACK = 1时，字段才有效==**。<br>9, PSH：推送位，尽快交付应用进程，不必等到缓存填满再交付<br>10, RST: RST = 1,表示TCP连接出现差错，必须释放重新连接<br>**==11,SYN：同步位，表示是一个请求或者相应报文，ACK =0,SYN =1,表示是一个请求报文，ACK = 1，SYN =1，表示是一个响应报文==</strong><br>12, ==<strong>FIN</strong>：终止位，FIN=1，表示发送方已经发送完毕，并要求释放连接==。<br>13, 窗口字段 2B<br>14, 校验和：2B<br>15, 紧急指针字段：16位<br>16, 选项字段<br>17, 填充字段  </li>
</ul>
</blockquote>
</li>
<li><p>TCP的连接与断开<br>1.TCP的三次握手（建立连接的个阶段  ）</p>
<ul>
<li>1,客户端向服务器发送一个请求报文，不包含应用层的数据，首部SYN=1，并消耗品一个起的随机序号。</li>
<li>2，服务器收到报文后，向客户机发回确认，并为此次连接分配TCP缓存和变量，确认报文中，SYN，ACK都为1，确认号字段为x+1，并返回一个随机的起始序号y</li>
<li>3，收到服务器发送的确认报文后，并继续向服务器发送确认，给出该连接的缓存和变量，该报文ACK=1，序号为x+1,确认号为 y+1.（可以携带数据），如不携带数据，则不会消耗确认号。</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line"></span><br><span class="line">客户-&gt;&gt;服务器:1⃣️SYN&#x3D;1，seq&#x3D;x</span><br><span class="line">服务器-&gt;&gt;客户: 2⃣️SYN&#x3D;1，ACK&#x3D;1，seq&#x3D;y，ack&#x3D;x+1</span><br><span class="line">客户-&gt;&gt;服务器: 3⃣️:ACK&#x3D;1，seq&#x3D;x+1 ack&#x3D;y+1️</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>TCP的四次挥手阶段（释放连接的过程）<ul>
<li>1，向服务器发送一个释放报文，并停止发送数据，此报文FIN=1，seq=u，u为服务器前面传过来的数据的最后一个字节序号+1，此时客户端不能给服务器发送数据，但服务器仍然能够给可客户端发送数据。</li>
<li>2，服务器收到释放报文之后，发出确认，确认号：u+1，并返回序号v，它等于客户端传给服务器最后一个数据的序号+1，此时，从客户端到服务端的连接被释放掉了。TCP处于半关闭壮态，服务器到客户端的连接并未断开</li>
<li>3，若服务器已经没有要向客户端发送的数据，此时发送连接释放报文段，FIN=1，ACK=1，seq=w，ack=u+1</li>
<li>4，客户机收到释放报文后，发出确认报文，ACK=1，确认号：sck=w+1，seq=u+1，ack=w+1，此时，TCP连接还未释放，必须等待计时器配置的时间2MSL后才会释放连接。</li>
</ul>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">sequenceDiagram</span><br><span class="line"></span><br><span class="line">客户-&gt;&gt;服务器:1⃣️FIN&#x3D;1，req&#x3D;u</span><br><span class="line">服务器-&gt;&gt;客户: 1⃣️ACK&#x3D;1，seq&#x3D;v，ack&#x3D;u+1</span><br><span class="line">服务器-&gt;&gt;客户: 3⃣️:FIN&#x3D;1，ACK&#x3D;1，seq&#x3D;w，sck&#x3D;u+1️</span><br><span class="line">客户-&gt;&gt;服务器: 3⃣️:ACK&#x3D;1，seq&#x3D;u+1，，ack&#x3D;w+1</span><br></pre></td></tr></table></figure>

<ul>
<li><p>关于TCP建立和释放阶段的两个问题点</p>
<blockquote>
<p>1.为什么采用三次握手而不是2次握手？<br>答：保证数据传输过程中的准确性，以及保证服务器资源不浪费。（2次握手）例如：A给B发了一个连接报文，但这个报文在传输过程中滞留，一定时间后，A认为超时，开始重传，B收到后，连接结束后，滞留的报文到达了B，B又认为是A传过来的建立连接的报文，就一直等待A连接。浪费了B的资源，而三次握手，像这种情况，由于B还要发给A’一个确认报文，当这个失效的报文到A，A直接抛弃这个失效的报文，保证了资源的不浪费以及数据的准确性。<br>2.为什么四次挥手不采用3次挥手？<br>答：</p>
</blockquote>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/computer/" data-id="ckhmnwyty00026rx4gxohd7uy" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-jsCore" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/jsCore/" class="article-date">
  <time datetime="2020-11-03T06:36:12.664Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/03/jsCore/">JS事件循环</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="javascript"><a href="#javascript" class="headerlink" title="javascript"></a>javascript</h1><p>javascript从诞生之日起就是一门<strong>单线程的非阻塞</strong>的脚本语言。这是由其最初的用途来决定的：与浏览器交互。</p>
<ul>
<li><p><strong>单线程</strong>：javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务</p>
</li>
<li><p><strong>非阻塞</strong>：执行异步任务的时候，主线程这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调</p>
</li>
<li><p><strong>为什么js会设计成单线程和非阻塞？</strong></p>
</li>
</ul>
<p>原因：我们需要进行各种各样的dom操作。试想一下 如果javascript是多线程的，那么当两个线程同时对dom进行一项操作，例如一个向其添加事件，而另一个删除了这个dom，此时该如何处理呢？javascript选择只用一个主线程来执行代码，这样就保证了程序执行的一致性。</p>
<ul>
<li><strong>js如何实现非阻塞</strong>？</li>
</ul>
<p>主角：<strong>event loop(事件循环)</strong></p>
<p><em>nodejs中的也存在与传统浏览器环境下的相似的事件循环。然而两者间却有着诸多不同，</em></p>
<h4 id="浏览器环境下js引擎的事件循环机制"><a href="#浏览器环境下js引擎的事件循环机制" class="headerlink" title="浏览器环境下js引擎的事件循环机制"></a><strong>浏览器环境下js引擎的事件循环机制</strong></h4><ul>
<li><p><strong>执行栈和事件队列</strong></p>
<blockquote>
<p><strong>执行栈</strong>：当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。 而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。</p>
<p><strong>事件队列</strong>：代码自上向下执行，遇到异步代码，就把异步代码放到事件队列中，直到执行栈里面没有任务，才会在事件队列中按顺序执行异步代码。</p>
</blockquote>
</li>
<li><p><strong>异步任务的分类</strong><br>1，macro task(宏任务)</p>
<ul>
<li><code>setInterval()</code></li>
<li><code>setTimeout()</code></li>
</ul>
<p>2，micro task(微任务)</p>
<ul>
<li><code>new Promise()</code></li>
<li><code>new MutaionObserver()</code></li>
</ul>
</li>
<li><p><strong>宏微任务的具体调用步骤</strong>：（当宏任务遇到微任务，先执行微任务）</p>
<p>我们以一段代码为例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">  </span><br><span class="line">  	<span class="built_in">setTimeout</span>(<span class="function">()=&gt;</span>&#123;</span><br><span class="line">      consle.log(<span class="number">6</span>)</span><br><span class="line">    &#125;,<span class="number">0</span>)</span><br><span class="line">  	<span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve,reject</span>)</span>&#123;</span><br><span class="line">  	  <span class="built_in">console</span>.log(<span class="number">4</span>)</span><br><span class="line">    	resolve(<span class="number">5</span>)</span><br><span class="line">		&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">    			<span class="built_in">console</span>.log(val);</span><br><span class="line">			&#125;)</span><br><span class="line">&#125;,<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function"><span class="keyword">function</span>(<span class="params">resolve,reject</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line">    resolve(<span class="number">3</span>)</span><br><span class="line">&#125;).then(<span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(val);</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h5 id="步骤如下"><a href="#步骤如下" class="headerlink" title="步骤如下"></a>步骤如下</h5><p><img src="/Users/niruoshangzaichang/Documents/js%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF.png" alt="js事件循环"></p>
</li>
</ul>
<p>​      最后打印结果为：231456</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/jsCore/" data-id="ckhmnwytz00036rx4bdal3py7" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-browser" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/11/03/browser/" class="article-date">
  <time datetime="2020-11-03T06:32:22.615Z" itemprop="datePublished">2020-11-03</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/11/03/browser/">浏览器发展史与现状</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。</p>
<p>浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。</p>
<p>常见的浏览器内核可以分这四种：Trident（IE）、Gecko(firfox)、Blink(chrome)、Webkit(safari)。(渲染引擎)</p>
<p>1、IE浏览器：<br> IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自此也引发了第一次浏览器大战。结果可想而知，微软大获全胜，网景不得不将自己卖给AOL公司。但实际上事情并没有结束，网景后来开发了风靡一时的Firefox火狐，至今Firefox也成为世界五大浏览器之一。<br> 1996年，微软从Spyglass手里拿到Spyglass Mosaic的源代码和授权，开始开发自己的浏览器IE。后来，微软以IE和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE。<br> 2、Opera浏览器：<br> Opera是挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。<br> 3、Safari浏览器：<br> 第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。<br> 4、Firefox浏览器：<br> Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。<br> 5、Chrome浏览器：<br> Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。</p>
<p>以上是五大浏览器的简介，接下来是四大内核。在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。<br> 作为前端开发，熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。<br> 1、IE浏览器内核：Trident内核，也是俗称的IE内核；<br> 2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；<br> 3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；<br> 4、Safari浏览器内核：Webkit内核；<br> 5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；<br> 6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；<br> 7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；<br> 8、百度浏览器、世界之窗内核：IE内核；<br> 9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；</p>
<h1 id="Trident-‘traɪd-ə-nt"><a href="#Trident-‘traɪd-ə-nt" class="headerlink" title="Trident ([‘traɪd(ə)nt])"></a>Trident ([‘traɪd(ə)nt])</h1><p>Trident(IE内核)：该内核程序在 1997 年的 IE4 中首次被采用，是微软在 Mosaic（”马赛克”，这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览） 代码的基础之上修改而来的，并沿用到 IE11，也被普遍称作 “IE内核”。</p>
<p>Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。由于 IE 本身的 “垄断性”（虽然名义上 IE 并非垄断，但实际上，特别是从 Windows 95 年代一直到 XP 初期，就市场占有率来说 IE 的确借助 Windows 的东风处于 “垄断” 的地位）而使得 Trident 内核的长期一家独大，微软很长时间都并没有更新 Trident 内核，这导致了两个后果——一是 Trident 内核曾经几乎与 W3C 标准脱节（2005年），二是 Trident 内核的大量 Bug 等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为 IE 浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox 和 Opera 就是这个时候兴起的。非 Trident 内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非 IE浏览器的浏览效果问题。</p>
<p>补充：IE 从版本 11 开始，初步支持 WebGL 技术。IE8 的 JavaScript 引擎是 Jscript，IE9 开始用 Chakra，这两个版本区别很大，Chakra 无论是速度和标准化方面都很出色。</p>
<p>国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。</p>
<p>Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。关于 Edge 浏览器更多可以参考 <a target="_blank" rel="noopener" href="https://www.zhihu.com/question/29985708">如何评价 Microsoft Edge 浏览器？</a> 以及 <a target="_blank" rel="noopener" href="http://news.cnblogs.com/n/536912/">微软开源Edge的JS引擎ChakraCore</a></p>
<p>关于 IE 的历史，推荐这篇文章 <a target="_blank" rel="noopener" href="http://www.ibailve.com/show/6-4027-1.html">激荡20年：IE浏览器的辉煌与落寞</a></p>
<h1 id="Gecko-‘gekəʊ"><a href="#Gecko-‘gekəʊ" class="headerlink" title="Gecko ([‘gekəʊ])"></a>Gecko ([‘gekəʊ])</h1><p>Gecko(Firefox 内核)：Netscape6 开始采用的内核，后来的 Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器也很多，这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因。</p>
<p>事实上，Gecko 引擎的由来跟 IE 不无关系，前面说过 IE 没有使用 W3C 的标准，这导致了微软内部一些开发人员的不满；他们与当时已经停止更新了的 Netscape 的一些员工一起创办了 Mozilla，以当时的 Mosaic 内核为基础重新编写内核，于是开发出了 Gecko。不过事实上，Gecko 内核的浏览器仍然还是 Firefox (火狐) 用户最多，所以有时也会被称为 Firefox 内核。此外 Gecko 也是一个跨平台内核，可以在Windows、 BSD、Linux 和 Mac OS X 中使用。</p>
<h1 id="Webkit"><a href="#Webkit" class="headerlink" title="Webkit"></a>Webkit</h1><p>一提到 webkit，首先想到的便是 chrome，可以说，chrome 将 Webkit内核 深入人心，殊不知，Webkit 的鼻祖其实是 Safari。现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了），苹果都哭瞎了有木有。</p>
<p>Safari 是苹果公司开发的浏览器，使用了KDE（Linux桌面系统）的 KHTML 作为浏览器的内核，Safari 所用浏览器内核的名称是大名鼎鼎的 WebKit。 Safari 在 2003 年 1 月 7 日首度发行测试版，并成为 Mac OS X v10.3 与之后版本的默认浏览器，也成为苹果其它系列产品的指定浏览器（也已支持 Windows 平台）。</p>
<p>如上述可知，WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。当年苹果在比较了 Gecko 和 KHTML 后，选择了后者来做引擎开发，是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。</p>
<p>Webkit内核 可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后，2008 年谷歌公司发布 chrome 浏览器，采用的 chromium 内核便 fork 了 Webkit。</p>
<p>PS：Apple 在 Safari 里面使用了自己的 Nitro JavaScript 引擎（只用 WebKit 来渲染 HTML），所以一般说到 Webkit，通常指的就是渲染引擎（而不包括 Javascript 引擎）</p>
<h1 id="Chromium-Blink"><a href="#Chromium-Blink" class="headerlink" title="Chromium/Blink"></a>Chromium/Blink</h1><p>2008 年，谷歌公司发布了 chrome 浏览器，浏览器使用的内核被命名为 chromium。</p>
<p>chromium fork 自开源引擎 webkit，却把 WebKit 的代码梳理得可读性提高很多，所以以前可能需要一天进行编译的代码，现在只要两个小时就能搞定。因此 Chromium 引擎和其它基于 WebKit 的引擎所渲染页面的效果也是有出入的。所以有些地方会把 chromium 引擎和 webkit 区分开来单独介绍，而有的文章把 chromium 归入 webkit 引擎中，都是有一定道理的。</p>
<p>谷歌公司还研发了自己的 Javascript 引擎，V8，极大地提高了 Javascript 的运算速度。</p>
<p>chromium 问世后，带动了国产浏览器行业的发展。一些基于 chromium 的单核，双核浏览器如雨后春笋般拔地而起，例如 搜狗、360、QQ浏览器等等，无一不是套着不同的外壳用着相同的内核。</p>
<p>然而 2013 年 4 月 3 日，谷歌在 Chromium Blog 上发表 <a target="_blank" rel="noopener" href="http://blog.chromium.org/2013/04/blink-rendering-engine-for-chromium.html">博客</a>，称将与苹果的开源浏览器核心 Webkit 分道扬镳，在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。</p>
<p>webkit 用的好好的，为何要投入到一个新的内核中去呢？</p>
<p>Blink 其实是 WebKit 的分支，如同 WebKit 是 KHTML 的分支。Google 的 Chromium 项目此前一直使用 WebKit(WebCore) 作为渲染引擎，但出于某种原因，并没有将其多进程架构移植入Webkit。</p>
<p>后来，由于苹果推出的 WebKit2 与 Chromium 的沙箱设计存在冲突，所以 Chromium 一直停留在 WebKit，并使用移植的方式来实现和主线 WebKit2 的对接。这增加了 Chromium 的复杂性，且在一定程度上影响了 Chromium 的架构移植工作。</p>
<p>基于以上原因，Google 决定从 WebKit 衍生出自己的 Blink 引擎（后由 Google 和 Opera Software 共同研发），将在 WebKit 代码的基础上研发更加快速和简约的渲染引擎，并逐步脱离 WebKit 的影响，创造一个完全独立的 Blink 引擎。这样以来，唯一一条维系 Google 和苹果之间技术关系的纽带就这样被切断了。</p>
<p>Google 和苹果在多个领域都是竞争对手，而唯独在浏览器引擎上有技术合作，利益一致。但为了各自的利益，谁都不会拿出 100% 的 “诚意” 来做好 WebKit，因为你做出来的成果竞争对手可以直接享用。移动互联网已经崛起，手机和平板设备端必将成为浏览器的另一个战场。这个时候，如果 Google 跟苹果仍然黏在一起，将会严重阻碍双方的进步，也会阻碍 WebKit 的进步。</p>
<p>据说 Blink 删除了 880w 行 webkit 代码。</p>
<p>至于为什么叫 blink？有兴趣的可以看下这篇访谈 <a target="_blank" rel="noopener" href="http://alistapart.com/blog/post/paul-irish-on-chrome-moving-to-blink">Paul Irish on Chrome Moving to Blink</a>，里面说</p>
<pre style="position: relative;">[复制代码](javascript:;)it fits that Blink will never support the infamous <blink> tag. </pre>

<p>Blink 引擎问世后，国产各种 chrome 系的浏览器也纷纷投入 Blink 的怀抱，可以在浏览器地址栏输入 <code>chrome://version</code> 进行查看。比如在 360 下：</p>
<p><img src="https://upload-images.jianshu.io/upload_images/815267-f922ca9910880819.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/607/format/webp" alt="img"></p>
<p>image</p>
<h1 id="Presto-‘prestəʊ"><a href="#Presto-‘prestəʊ" class="headerlink" title="Presto ([‘prestəʊ])"></a>Presto ([‘prestəʊ])</h1><p>Presto 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌大本营。</p>
<p>Opera 的一个里程碑作品是 Opera7.0，因为它使用了 Opera Software <strong>自主开发</strong>的 Presto 渲染引擎，取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎。该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。</p>
<p>Presto 加入了动态功能，例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。Presto 在推出后不断有更新版本推出，使不少错误得以修正，以及阅读 Javascript 效能得以最佳化，并成为当时速度最快的引擎。</p>
<p>然而为了减少研发成本，Opera 在 2013 年 2 月宣布放弃 Presto，转而跟随 Chrome 使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎，Presto 内核的 Opera 浏览器版本永远的停留在了 12.17。在 Chrome 于 2013 年推出 Blink 引擎之后，Opera 也紧跟其脚步表示将转而使用 Blink 作为浏览器核心引擎。</p>
<p>Presto 与开源的 WebKit 和经过谷歌加持的 Chromium 系列相比毫无推广上的优势，这是 Opera 转投 WebKit 的主要原因，并且使用 WebKit 内核的 Opera 浏览器可以兼容谷歌 Chrome 浏览器海量的插件资源。但是换内核的代价对于 Opera 来说过于惨痛。使用谷歌的 WebKit 内核之后，原本快速，轻量化，稳定的 Opera 浏览器变得异常的卡顿，而且表现不稳定，Opera 原本旧内核浏览器书签同步到新内核上的工作 Opera 花了整整两年时间，期间很多 Opera 的用户纷纷转投谷歌浏览器和其他浏览器，造成了众多的用户流失。时至今日现在还有上千万人在使用老版本的 Opera。</p>
<p>很多人都认为 Opera 浏览器终止在了 12.17，此后所更新的 Opera 版本号不再是原来那个 Opera。</p>
<p>说好的 Presto Forever 呢？</p>
<h1 id="关于移动端"><a href="#关于移动端" class="headerlink" title="关于移动端"></a>关于移动端</h1><p>移动端的浏览器内核主要说的是系统内置浏览器的内核。</p>
<p>目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等，其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit，Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink，Windows Phone 8 系统浏览器内核是 Trident。</p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/11/03/browser/" data-id="ckhmnwytx00016rx4aud247ma" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-typeScript" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/my_blog/2020/10/26/typeScript/" class="article-date">
  <time datetime="2020-10-26T07:23:46.366Z" itemprop="datePublished">2020-10-26</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/my_blog/2020/10/26/typeScript/">TypeScript笔记</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="TypeScript"><a href="#TypeScript" class="headerlink" title="TypeScript"></a>TypeScript</h3><h4 id="安装，编译"><a href="#安装，编译" class="headerlink" title="安装，编译"></a>安装，编译</h4><p><code>npm install -g typescript</code></p>
<p>编译：tsp 文件名 —-&gt;编译成js文件</p>
<h4 id="基本语法"><a href="#基本语法" class="headerlink" title="基本语法"></a>基本语法</h4><ul>
<li><p>基本数据类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//对于基本的变量</span></span><br><span class="line"><span class="keyword">let</span> a:<span class="built_in">number</span> = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> b:<span class="built_in">boolean</span> = <span class="literal">false</span>;</span><br><span class="line"><span class="keyword">let</span> c:<span class="built_in">string</span> = <span class="string">&#x27;ada&#x27;</span>;</span><br><span class="line"><span class="keyword">let</span> d:<span class="built_in">any</span> = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">let</span> e:<span class="literal">null</span> </span><br><span class="line"><span class="keyword">let</span> f:<span class="literal">undefined</span>;</span><br><span class="line"><span class="keyword">let</span> g:<span class="built_in">never</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//类型组合</span></span><br><span class="line"><span class="keyword">let</span> str:<span class="built_in">number</span>|<span class="built_in">string</span>|<span class="literal">null</span> = <span class="literal">null</span>;</span><br><span class="line">str = <span class="string">&#x27;asd&#x27;</span> </span><br><span class="line"></span><br><span class="line"><span class="comment">//对数组</span></span><br><span class="line"><span class="keyword">let</span> h:[<span class="built_in">string</span>,<span class="built_in">boolean</span>,<span class="built_in">any</span>] <span class="comment">//元组</span></span><br><span class="line"><span class="comment">//普通数组</span></span><br><span class="line"><span class="keyword">let</span> i:<span class="built_in">number</span>[]</span><br><span class="line"><span class="keyword">let</span> j:<span class="built_in">Array</span>&lt;<span class="built_in">number</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//枚举类型</span></span><br><span class="line"><span class="built_in">enum</span> flag &#123;sucess=<span class="number">1</span>,falile=<span class="number">2</span>&#125;</span><br><span class="line"><span class="comment">//k的类型位flag的枚举类型</span></span><br><span class="line"><span class="keyword">let</span> k:flag = flag.sucess</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数</p>
<p>参数类型和返回值类型</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">arr:<span class="built_in">Array</span>&lt;int&gt;,str:<span class="built_in">string</span></span>):<span class="title">void</span></span>&#123;</span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>可选参数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">str:<span class="built_in">string</span>,str1?:<span class="built_in">number</span></span>):<span class="title">void</span></span>&#123;<span class="comment">//函数调用时，第二个参数可选</span></span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>默认参数</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">str:<span class="built_in">string</span>, str1:<span class="built_in">number</span> = <span class="number">1</span></span>):<span class="title">number</span></span>&#123;</span><br><span class="line">  <span class="comment">//函数体</span></span><br><span class="line">  <span class="keyword">return</span> <span class="number">1</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>任意(数量)参数—-求和为例</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">...arr:<span class="built_in">number</span>[]</span>):<span class="title">number</span></span>&#123;</span><br><span class="line">  <span class="keyword">let</span> num:<span class="built_in">number</span> = <span class="number">0</span>;</span><br><span class="line">  <span class="function"><span class="title">for</span>(<span class="params"><span class="keyword">let</span> i =<span class="number">1</span>; i &lt;arr.length; i++</span>)</span>&#123;</span><br><span class="line">    num =+ arr[i]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> num</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="TypeScript中函数重载"><a href="#TypeScript中函数重载" class="headerlink" title="TypeScript中函数重载"></a>TypeScript中函数重载</h4><ul>
<li><p>1,函数参数类型不同</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//情况一：参数类型不同</span></span><br><span class="line"><span class="comment">//两个重载对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">num:<span class="built_in">number</span>, str:<span class="built_in">string</span></span>):<span class="title">void</span> </span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">num:<span class="built_in">string</span>, str:<span class="built_in">string</span></span>):<span class="title">string</span> </span></span></span><br><span class="line"><span class="function"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn</span> (<span class="params">num:<span class="built_in">any</span>, str:<span class="built_in">any</span></span>):<span class="title">any</span> </span>&#123;</span></span></span><br><span class="line"><span class="function"><span class="function">  <span class="title">if</span>(<span class="params">num === <span class="string">&#x27;number&#x27;</span></span>) </span>&#123;</span></span><br><span class="line"><span class="function">    //第一个函数内容</span></span><br><span class="line"><span class="function">  &#125;<span class="title">else</span></span>&#123;</span><br><span class="line">    <span class="comment">//第二个函数的内容</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p>2,函数的参数的个数不同</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数重载</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">//情况二：参数个数不同</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span> (<span class="params">num:<span class="built_in">number</span>, str:<span class="built_in">string</span></span>):<span class="title">void</span> </span></span><br><span class="line"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span> (<span class="params">num:<span class="built_in">string</span>, str?:<span class="built_in">string</span></span>):<span class="title">string</span> </span></span></span><br><span class="line"><span class="function"><span class="function"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span> (<span class="params">num:<span class="built_in">any</span>, str:<span class="built_in">any</span></span>):<span class="title">any</span> </span>&#123;</span></span></span><br><span class="line"><span class="function"><span class="function">  <span class="title">if</span>(<span class="params">str</span>)</span>&#123;</span></span><br><span class="line"><span class="function">    //第一个函数内容</span></span><br><span class="line"><span class="function">  &#125;<span class="title">else</span></span>&#123;</span><br><span class="line">    <span class="comment">//第二个函数内容</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="类"><a href="#类" class="headerlink" title="类"></a>类</h4><p>Public:公有，类内，类外，派生类等可访问</p>
<p>protected:保护，类内，派生类能访问，类外不能访问</p>
<p>Private:私有，类内能访问，类外，派生类不能访问</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Animal</span> </span>&#123;</span><br><span class="line">  <span class="comment">// 修饰符有 public protected  private</span></span><br><span class="line">  name:<span class="built_in">string</span> <span class="comment">//不写修饰符默认表示public</span></span><br><span class="line">	<span class="comment">//静态变量</span></span><br><span class="line">  <span class="keyword">static</span> age:<span class="built_in">number</span></span><br><span class="line">  <span class="comment">//构造函数</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//实例方法：通过实例对象调用的方法</span></span><br><span class="line">  fn():<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//静态方法:静态方法只能调用静态变量，不能调用其它类型变量</span></span><br><span class="line">  <span class="keyword">static</span> fn1():<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(Animal.age)<span class="comment">//通过类名调用</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> p = <span class="keyword">new</span> Animal(<span class="string">&#x27;狗&#x27;</span>)</span><br><span class="line"><span class="comment">//调用实例方法</span></span><br><span class="line">p.fn()  <span class="comment">//狗</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><p>类的继承</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="keyword">extends</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>(name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//子类重写父类的方法(子类实例调用的时候，先去子类中找，找不到去父类中去找)</span></span><br><span class="line">  <span class="function"><span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;子类的方法&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//子类自己的方法</span></span><br><span class="line">  <span class="function"><span class="title">fn2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="多态"><a href="#多态" class="headerlink" title="多态"></a>多态</h4><p>基类定义一个方法不实现，让子类去实现，不同的派生类有不同的实现方式</p>
<h4 id="抽象类abstract"><a href="#抽象类abstract" class="headerlink" title="抽象类abstract"></a>抽象类abstract</h4><p>提供其他类继承的模版，定义方法不实现，不能半日直接是实例话</p>
<p>抽象方法：定义在抽象类中，不实现具体方法，只提供定义。</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">abstract</span> <span class="class"><span class="keyword">class</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line">  name:<span class="built_in">string</span></span><br><span class="line">  </span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//定义抽象函数；只定义不实现</span></span><br><span class="line">  <span class="keyword">abstract</span> fn():<span class="built_in">void</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Zhangsan</span> <span class="keyword">extends</span> <span class="title">Person</span></span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">super</span>(name)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//子类必须实现</span></span><br><span class="line">  fn ()&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="接口"><a href="#接口" class="headerlink" title="接口"></a>接口</h4><p>用来描述和规范属性，函数，类，等等。</p>
<ul>
<li><p>定义接口与使用（属性接口）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//定义接口(必须写分号)----属性接口</span></span><br><span class="line">interface Fullname&#123;</span><br><span class="line">  firstName:string;</span><br><span class="line">  lastName:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//可选参数</span></span><br><span class="line">interface Fullname&#123;</span><br><span class="line">  firstName:string;</span><br><span class="line">  lastName？:string; <span class="comment">// 这个参数可传可不传</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">printName</span>(<span class="params">name:Fullname</span>):<span class="title">void</span></span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(name.firstName,name.lastName)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//直接调用（参数必须完全满足接口）</span></span><br><span class="line">printName(&#123;</span><br><span class="line">  firstName:<span class="string">&#x27;zhang&#x27;</span>,</span><br><span class="line">  lastName:<span class="string">&#x27;xin&#x27;</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  firstName:<span class="string">&#x27;zhang&#x27;</span>,</span><br><span class="line">  lastName:<span class="string">&#x27;xin&#x27;</span>,</span><br><span class="line">  age:<span class="number">12</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//外部对象调用，包含接口即可</span></span><br><span class="line">printName(obj)</span><br></pre></td></tr></table></figure>
</li>
<li><p>函数接口</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//函数接口</span></span><br><span class="line">interface encrypt&#123;</span><br><span class="line">  <span class="comment">//参数                        返回值</span></span><br><span class="line">  (value1:string,<span class="attr">value2</span>:number):string;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//实现函数接口的方法一：</span></span><br><span class="line"><span class="keyword">let</span> fn:encrypt = <span class="function"><span class="keyword">function</span> (<span class="params">v1:string,v2:number</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> v1+v2</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="string">&#x27;xin&#x27;</span>,<span class="number">12</span>) </span><br><span class="line"><span class="comment">//实现函数接口的方式二：</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn1</span>(<span class="params">v1:string,v2:number</span>):<span class="title">string</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> v1+v2</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> fn2:encrypt = fn1</span><br><span class="line">fn2(<span class="string">&#x27;xin&#x27;</span>,<span class="number">29</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>可索引接口（数组，对象）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//可索引接口(数组)</span></span><br><span class="line">interface arr&#123;</span><br><span class="line">  <span class="comment">//索引        值</span></span><br><span class="line">  [index:number]:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> ar:arr = [<span class="string">&#x27;eq&#x27;</span>,<span class="string">&#x27;wq&#x27;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">//可索引接口(对象)</span></span><br><span class="line">interface obj&#123;</span><br><span class="line">  [index:string]:string;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> ob:obj = &#123;</span><br><span class="line">  name:<span class="string">&#x27;xin&#x27;</span>,</span><br><span class="line">  age:<span class="string">&#x27;12&#x27;</span></span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>
</li>
<li><p>类接口</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//类接口</span></span><br><span class="line">interface Animals&#123;</span><br><span class="line">  <span class="comment">//类中的属性</span></span><br><span class="line">  name:string;</span><br><span class="line">  <span class="comment">//类中的方法</span></span><br><span class="line">  eat(str:string):<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dogg</span> <span class="title">implements</span> <span class="title">Animals</span></span>&#123;</span><br><span class="line">  name:string</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">name:string</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">  &#125;</span><br><span class="line">  eat():<span class="keyword">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = <span class="keyword">new</span> Dogg(<span class="string">&#x27;小黑&#x27;</span>)</span><br><span class="line">d.eat()</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="泛型（函数，类后面加）"><a href="#泛型（函数，类后面加）" class="headerlink" title="泛型（函数，类后面加）"></a>泛型（函数，类后面加<T>）</h4><p>指的是不确定的数据类型，要求传入的参数和返回的参数类型一致</p>
<ul>
<li>函数的泛型（范型方法）</li>
</ul>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//范型</span></span><br><span class="line">function fn3&lt;T&gt;(value:T):T&#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//调用的时候动态决定T是什么数据类型</span></span><br><span class="line">fn3&lt;string&gt;(<span class="string">&#x27;s&#x27;</span>)</span><br></pre></td></tr></table></figure>

<ul>
<li><p>类的范型（范型类）</p>
<p>这个类既能处理number类型，也能处理string类型的数值</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//类的范型</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Personn</span>&lt;<span class="title">T</span>&gt;</span>&#123;</span><br><span class="line">  list:T[] = []</span><br><span class="line">  addd(value:T):<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.list.push(value)</span><br><span class="line">  &#125;</span><br><span class="line">  print():<span class="built_in">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>.list)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//指定模版类型为string</span></span><br><span class="line"><span class="keyword">let</span> p1 = <span class="keyword">new</span> Personn&lt;<span class="built_in">string</span>&gt;()</span><br><span class="line">p1.addd(<span class="string">&#x27;xin&#x27;</span>)</span><br><span class="line">p1.addd(<span class="string">&#x27;zhang&#x27;</span>)</span><br><span class="line">p1.print()<span class="comment">// 打印数组</span></span><br><span class="line"><span class="comment">//指定模版类型为number</span></span><br><span class="line"><span class="keyword">let</span> p2 = <span class="keyword">new</span> Personn&lt;<span class="built_in">number</span>&gt;()</span><br><span class="line">p2.addd(<span class="number">1</span>)</span><br><span class="line">p2.addd(<span class="number">1</span>)</span><br><span class="line">p2.addd(<span class="number">1</span>)</span><br><span class="line">p2.print()<span class="comment">//打印数组</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>接口的范型（范型接口）</p>
<p>写法一：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//范型接口</span></span><br><span class="line"><span class="keyword">interface</span> fnnnn&#123;</span><br><span class="line">  &lt;T&gt;(value:T):T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a:fnnnn = <span class="function"><span class="keyword">function</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//动态确定类型呢</span></span><br><span class="line">a&lt;<span class="built_in">string</span>&gt;(<span class="string">&#x27;a&#x27;</span>)</span><br></pre></td></tr></table></figure>

<p>写法二：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">interface fnnnnnn&lt;T&gt;&#123;</span><br><span class="line">  (value:T):T</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">b</span>&lt;<span class="title">T</span>&gt;(<span class="params">value:T</span>):<span class="title">T</span></span>&#123;</span><br><span class="line">  <span class="keyword">return</span> value</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> c:fnnnnnn&lt;string&gt; = b</span><br><span class="line">c(<span class="string">&#x27;xinnn&#x27;</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>把类作为参数来限制传入的数据类型</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//把类作为参数来限制数据传输的类型</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span></span>&#123;</span><br><span class="line">  username:string|<span class="literal">undefined</span></span><br><span class="line">  password:string|<span class="literal">undefined</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params">username,password</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.username = username</span><br><span class="line">    <span class="built_in">this</span>.password = password</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Mydb</span></span>&#123;</span><br><span class="line">  <span class="comment">//传入的user 必须满足User里面的规范</span></span><br><span class="line">  add(user:User):<span class="keyword">void</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(user)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> zhangsan =  <span class="keyword">new</span> User(<span class="string">&#x27;zhangsan&#x27;</span>,<span class="string">&#x27;123456&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> db = <span class="keyword">new</span> Mydb()</span><br><span class="line">db.add(zhangsan)</span><br></pre></td></tr></table></figure>



</li>
</ul>
<h4 id="命名空间"><a href="#命名空间" class="headerlink" title="命名空间"></a>命名空间</h4><p>防止不同人协作的时候，有相同的民命</p>
<ul>
<li>同一个文件，不同命名空间</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//命名空间A</span></span><br><span class="line"><span class="keyword">namespace</span> A&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//命名空间B</span></span><br><span class="line"><span class="keyword">namespace</span> B&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎22222&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> d1 = <span class="keyword">new</span> A.Dogs(<span class="string">&#x27;狗&#x27;</span>)  <span class="comment">// 调用A命名空间的类</span></span><br><span class="line"><span class="keyword">let</span> d2 = <span class="keyword">new</span> B.Dogs(<span class="string">&#x27;傻狗&#x27;</span>) <span class="comment">// 调用B命名空间的类</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li><p>不同文件命名空间的调用</p>
<p>文件1</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//命名空间</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> A&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">namespace</span> B&#123;</span><br><span class="line">  <span class="keyword">interface</span> Animal &#123;</span><br><span class="line">    name:<span class="built_in">string</span>;</span><br><span class="line">    eat():<span class="built_in">void</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//暴露类</span></span><br><span class="line">  <span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">Dogs</span> <span class="title">implements</span> <span class="title">Animal</span></span>&#123;</span><br><span class="line">      name:<span class="built_in">string</span>;</span><br><span class="line">      <span class="function"><span class="title">constructor</span>(<span class="params">name:<span class="built_in">string</span></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">this</span>.name = name;</span><br><span class="line">      &#125;</span><br><span class="line">      eat():<span class="built_in">void</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">this</span>.name+<span class="string">&#x27;吃屎22222&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>文件二：</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;A&#125; <span class="keyword">from</span> <span class="string">&#x27;文件1路径&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d = <span class="keyword">new</span> A.dogs(<span class="string">&#x27;狗&#x27;</span>);</span><br><span class="line">d.eat();</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h4 id="装饰器"><a href="#装饰器" class="headerlink" title="装饰器"></a>装饰器</h4><p>装饰器是一种特殊类型的声名，他能附加到声名，方法，属性，参数上，可以修改类的行为。</p>
<p>可以扩充类，属性，参数，方法的功能。</p>
<p>常见的装饰器分类：</p>
<p>​    类装饰器</p>
<p>​    属性装饰器</p>
<p>​    方法装饰器</p>
<p>​    参数装饰器</p>
<p>装饰器写法：1，普通装饰器（无法传参）</p>
<p>​                       2，工厂装饰器（可以传递参数）</p>
<ul>
<li><p>类的普通装饰器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//普通的类装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn22</span>(<span class="params">params:any</span>)</span>&#123; <span class="comment">// params 代表的就是这个类</span></span><br><span class="line">  <span class="built_in">console</span>.log(params)</span><br><span class="line">  <span class="comment">//给类扩充属性</span></span><br><span class="line">  params.prototype.name = <span class="string">&#x27;xxx&#x27;</span></span><br><span class="line">  <span class="comment">//给类扩充方法</span></span><br><span class="line">  params.prototype.getDate = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">@fn22</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Car</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>类的工厂装饰器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//工厂装饰器</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fnaa</span>(<span class="params">params:string</span>)</span>&#123; <span class="comment">// params 代表的就是这个类</span></span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">target:any</span>)</span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(params);   <span class="comment">// 参数</span></span><br><span class="line">      <span class="built_in">console</span>.log(target);  <span class="comment">// 目标类</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">@fnaa(<span class="string">&#x27;我是传递的参数&#x27;</span>)</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Car</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="keyword">new</span> Car();</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li><p>修改数据</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fnaaa</span>(<span class="params">target:any</span>)</span>&#123; </span><br><span class="line">    <span class="keyword">return</span> <span class="class"><span class="keyword">class</span> <span class="keyword">extends</span> <span class="title">target</span></span>&#123;</span><br><span class="line">        name:any = <span class="string">&#x27;修改后的数据&#x27;</span>;</span><br><span class="line">        <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br><span class="line">@fnaaa</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Car</span> </span>&#123;</span><br><span class="line">  name:string|<span class="literal">undefined</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = <span class="string">&#x27;aaaa&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="keyword">new</span> Car();</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li>属性装饰器</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fff</span>(<span class="params">params:string</span>)</span>&#123;  <span class="comment">//装饰器传的参数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">target:any,attr:any</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(attr) <span class="comment">// 被修饰的属性</span></span><br><span class="line">    <span class="built_in">console</span>.log(target)  <span class="comment">//属性所在的类</span></span><br><span class="line">    <span class="comment">//把装饰器的参数赋值给类的被修饰的属性name</span></span><br><span class="line">    target.attr = params</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Cars</span> </span>&#123;</span><br><span class="line">  @fff(<span class="string">&#x27;xxxxxxxx&#x27;</span>)</span><br><span class="line">  name:string|<span class="literal">undefined</span></span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = <span class="string">&#x27;aaaa&#x27;</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">sayHie</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>方法装饰器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//方法装饰器</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ttt</span>(<span class="params">params:any</span>)</span>&#123;<span class="comment">//装饰器传递的参数</span></span><br><span class="line">  <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params">target:any,methodsName:any,desc:any</span>)</span>&#123;<span class="comment">//参数一target：修饰方法的类，参数二：methodsName：被修饰的</span></span><br><span class="line">                    <span class="comment">//名字，参数三：desc:当前方法的描述</span></span><br><span class="line">    <span class="comment">//修改当前被装饰的方法</span></span><br><span class="line">    <span class="keyword">let</span> oMethod = desc.value;<span class="comment">//保存之前的方法</span></span><br><span class="line">    desc.value = <span class="function"><span class="keyword">function</span> (<span class="params">...args:any</span>) </span>&#123;</span><br><span class="line">        args.map(<span class="function">(<span class="params">v</span>) =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">return</span> <span class="built_in">String</span>(v);</span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="comment">//添加</span></span><br><span class="line">        oMethod.apply(<span class="built_in">this</span>,args)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">AAAA</span></span>&#123;</span><br><span class="line">  <span class="function"><span class="title">constructor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br><span class="line">  @ttt(<span class="string">&#x27;xxxxxx&#x27;</span>)</span><br><span class="line">  <span class="function"><span class="title">getName</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2020/10/26/typeScript/" data-id="ckhmnwytz00046rx41oq5amfj" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/11/">November 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/my_blog/archives/2020/10/">October 2020</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/my_blog/2020/11/18/zhengze/">JS中的正则表达式</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/react/">React基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/vue/">Vue基础知识笔记</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/async/">JS异步编程的三种方案</a>
          </li>
        
          <li>
            <a href="/my_blog/2020/11/03/computer/">计算机网路笔记</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jone-xin<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/my_blog/" class="mobile-nav-link">主页</a>
  
    <a href="/my_blog/archives" class="mobile-nav-link">归档</a>
  
    <a target="_blank" rel="noopener" href="https://gitee.com/xiangxinag-darling" class="mobile-nav-link">@我的gitee</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/my_blog/fancybox/jquery.fancybox.css">

  
<script src="/my_blog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/my_blog/js/script.js"></script>




  </div>
</body>
</html>